feat: up to date docs screenshots with playwright

superset-frontend/.gitignore

@@ -5,3 +5,4 @@ src/temp
 .temp_cache/
 .tsbuildinfo
 .swc/
+playwright/.auth

superset-frontend/playwright.config.ts

@@ -21,6 +21,10 @@
 
 // eslint-disable-next-line import/no-extraneous-dependencies
 import { defineConfig } from '@playwright/test';
+import path from 'path';
+
+const authFile = path.join(__dirname, 'playwright/.auth/admin.json');
+
 
 export default defineConfig({
   // Test directory
@@ -60,7 +64,7 @@ export default defineConfig({
   // Global test setup
   use: {
     // Use environment variable for base URL in CI, default to localhost:8088 for local
-    baseURL: process.env.PLAYWRIGHT_BASE_URL || 'http://localhost:8088',
+    baseURL: process.env.PLAYWRIGHT_BASE_URL || 'http://localhost:8088/',
 
     // Browser settings
     headless: !!process.env.CI,
@@ -76,12 +80,35 @@ export default defineConfig({
   },
 
   projects: [
+    {
+      name: 'setup-auth', use: {
+        headless: true,
+      },
+      testMatch: /.*\.setup\.ts/
+    },
     {
       name: 'chromium',
       use: {
         browserName: 'chromium',
         testIdAttribute: 'data-test',
       },
+      // don't pre-authenticate for general tests
+      testIgnore: 'docs/*.spec.ts'
+    },
+    {
+      name: 'chromium-authenticated',
+      use: {
+        browserName: 'chromium',
+        testIdAttribute: 'data-test',
+        storageState: authFile,
+        headless: true,
+        actionTimeout: 60000,
+        navigationTimeout: 60000,
+        viewport: { width: 1920, height: 1080 },
+      },
+      // only run the playwright files for docs with pre-authentication
+      dependencies: ['setup-auth'],
+      testMatch: 'docs/*.spec.ts'
     },
   ],
 

superset-frontend/playwright/tests/auth.setup.ts

@@ -0,0 +1,19 @@
+import { test as setup, expect } from '@playwright/test';
+import path from 'path';
+
+const authFile = path.join(__dirname, '../.auth/admin.json');
+
+setup('authenticate', async ({ page }) => {
+  await page.goto('/login/');
+  await page.waitForLoadState('domcontentloaded');
+  await page.locator('#username').fill('admin');
+  await page.locator('#password').fill('admin');
+  await page.locator('[type="submit"]').click();
+
+  // wait until redirected to any /superset/ URL
+  await page.waitForURL("http://localhost:8088/superset/welcome/", { timeout: 60000});
+
+
+  await page.context().storageState({ path: authFile });
+  console.log(`Authentication state saved to ${authFile}`);
+});

superset-frontend/playwright/tests/docs/docs-screenshots.spec.ts

@@ -0,0 +1,49 @@
+// @ts-check
+import { test, expect } from '@playwright/test';
+
+const docsPath: string = '../docs/static/img/screenshots/'
+
+test('chart type screenshot', async ({ page }) => {
+    await page.goto('/chart/add');
+    await page.waitForLoadState('domcontentloaded');
+    await expect(page.getByText('Choose chart type')).toBeVisible();
+    await page.getByRole('tab', { name: 'All charts' }).click();
+    await page.addStyleTag({ content: 'body { zoom: 0.8 }' });
+    await page.waitForTimeout(1000); // wait for charts to load
+    await (page.locator('.viz-gallery')).screenshot({ path: docsPath + 'gallery.jpg', type: 'jpeg' });
+});
+
+test('dashboard content screenshot', async ({ page }) => {
+    await page.goto('/dashboard/list/');
+    await page.waitForLoadState('domcontentloaded');
+    await page.getByRole('link', { name: 'Slack Dashboard' }).click();
+    await page.addStyleTag({ content: 'body { zoom: 0.8 }' });
+    await page.waitForTimeout(5000); // wait for chart to load
+    await (page.locator('[data-test="dashboard-content-wrapper"]')).screenshot({ path: docsPath + 'slack_dash.jpg', type: 'jpeg' });
+});
+
+test('chart editor screenshot', async ({ page }) => {
+    await page.goto('/chart/list/');
+    await page.waitForLoadState('domcontentloaded');
+    await page.locator('[data-test="filters-search"]').fill('life');
+    await page.locator('[data-test="filters-search"]').press('Enter');
+    await page.locator('[data-test="Life Expectancy VS Rural %-list-chart-title"]').click();
+    await page.waitForTimeout(10000); // wait for charts to load
+    await page.screenshot({ path: docsPath + 'explore.jpg', type: 'jpeg', fullPage: true });
+});
+
+test('sqllab screenshot', async ({ page }) => {
+    await page.goto('/sqllab');
+    await page.waitForLoadState('domcontentloaded');
+    await page.getByRole('combobox', { name: 'Select schema or type to' }).fill('main');
+    await page.getByRole('combobox', { name: 'Select schema or type to' }).press('Enter');
+    await page.waitForTimeout(1000);
+    await page.getByRole('combobox', { name: 'Select table or type to' }).fill('covid');
+    await page.getByRole('combobox', { name: 'Select table or type to' }).press('Enter');
+    await page.locator('.ace_content').click();
+    await page.getByRole('textbox', { name: 'Cursor at row' }).fill('SELECT "developer_researcher",\n"stage_of_development",\n"product_category",\n"country_name",\nFROM main.covid_vaccines');
+    await page.locator('[data-test="run-query-action"]').click();
+    await page.locator('.ace_content').click();
+    await page.waitForTimeout(3000); // wait for charts to load
+    await page.screenshot({ path: docsPath + 'sql_lab.jpg', type: 'jpeg', fullPage: true });
+});