Add playwright

.gitignore

@@ -60,6 +60,7 @@ htmlcov/
 .cache
 nosetests.xml
 coverage.xml
+playwright-report/
 
 # Front-End #
 #############

.sauce/config.yml

@@ -0,0 +1,45 @@
+apiVersion: v1alpha
+kind: playwright
+sauce:
+  region: us-west-1
+  concurrency: 3 # Controls how many suites are executed at the same time.
+  metadata:
+    tags:
+      - design-system-playwright
+docker:
+  # Affects how test files are transferred to the docker container when using the docker mode.
+  fileTransfer: copy # Choose between mount|copy.
+playwright:
+  version: package.json # See https://docs.saucelabs.com/dev/cli/saucectl/#supported-frameworks-and-browsers for a list of supported versions.
+  configFile: playwright.config.ts # See https://docs.saucelabs.com/dev/testrunner-toolkit/configuration/playwright#configuration-examples for a list of supported configuration files.
+# Controls what files are available in the context of a test run (unless explicitly excluded by .sauceignore).
+rootDir: ./
+suites:
+  - name: 'Firefox Win'
+    platformName: 'Windows 11'
+    screenResolution: '1440x900'
+    testMatch: ['.*.js']
+    params:
+      browserName: 'firefox'
+      project: 'firefox' # Runs the project that's defined in `playwright.config.js`
+  - name: 'Chromium Mac'
+    platformName: 'macOS 12'
+    screenResolution: '1440x900'
+    testMatch: ['.*.js']
+    params:
+      browserName: 'chromium'
+      project: 'chromium'
+  - name: 'Webkit Win'
+    platformName: 'Windows 11'
+    screenResolution: '1440x900'
+    testMatch: ['.*.js']
+    params:
+      browserName: 'webkit'
+      project: 'webkit'
+# Controls what artifacts to fetch when the suite on Sauce Cloud has finished.
+# artifacts:
+#   download:
+#     when: always
+#     match:
+#       - console.log
+#     directory: ./artifacts/

.sauceignore

@@ -0,0 +1,15 @@
+# This file instructs saucectl to not package any files mentioned here.
+.git/
+.github/
+.DS_Store
+.hg/
+.vscode/
+.idea/
+.gitignore
+.hgignore
+.gitlab-ci.yml
+.npmrc
+*.gif
+# Remove this to have node_modules uploaded with code
+node_modules/
+

jest.config.js

@@ -18,6 +18,7 @@ export default {
   moduleNameMapper: {
     '\\.(svg)$': '<rootDir>/test/unit-test/mocks/fileMock.js',
   },
+  modulePathIgnorePatterns: ['<rootDir>/test/browser'],
   testEnvironmentOptions: {
     url: 'http://localhost',
   },

package.json

@@ -43,8 +43,8 @@
     "serve-netlify": "netlify-cms-proxy-server",
     "start": "yarn compile-dev && concurrently --kill-others \"yarn serve-netlify\" \"yarn serve-jekyll\" \"yarn compile-dev --watch\"",
     "jest": "yarn node --experimental-vm-modules $(yarn bin jest)",
-    "test:browser": "wdio run ./wdio.config.cjs",
-    "test:browser:cloud": ": ${SAUCE_USERNAME?\"You need to define SAUCE_USERNAME and SAUCE_ACCESS_KEY env variables \"} && wdio run ./wdio.config.sauce.cjs"
+    "test:browser": "npx playwright test",
+    "test:browser:cloud": ": ${SAUCE_USERNAME?\"You need to define SAUCE_USERNAME and SAUCE_ACCESS_KEY env variables \"} && saucectl run --region us-west-1"
   },
   "browserslist": "> 0.5%, last 2 versions, Firefox ESR, not dead, ie >= 11",
   "dependencies": {
@@ -64,14 +64,9 @@
     "@babel/preset-env": "7.22.7",
     "@babel/preset-react": "7.22.5",
     "@lhci/cli": "0.12.0",
-    "@wdio/cli": "7.26.0",
-    "@wdio/local-runner": "7.26.0",
-    "@wdio/mocha-framework": "7.26.0",
-    "@wdio/sauce-service": "7.26.0",
-    "@wdio/spec-reporter": "7.26.0",
+    "@playwright/test": "1.36.0",
     "autoprefixer": "10.4.14",
     "babel-loader": "9.1.3",
-    "chromedriver": "113.0.0",
     "concurrently": "8.2.0",
     "css-loader": "6.8.1",
     "cssnano": "6.0.1",
@@ -98,13 +93,13 @@
     "postcss-loader": "7.3.3",
     "prettier": "2.8.8",
     "prop-types": "15.8.1",
+    "saucectl": "0.151.1",
     "stylelint": "15.10.1",
     "stylelint-config-prettier": "9.0.5",
     "stylelint-config-recommended-less": "1.0.4",
     "svg-inline-loader": "0.8.2",
     "svgo": "3.0.2",
     "terser-webpack-plugin": "5.3.9",
-    "wdio-chromedriver-service": "8.1.1",
     "webpack": "5.88.1",
     "webpack-cli": "5.1.4"
   },

playwright.config.ts

@@ -0,0 +1,90 @@
+import { defineConfig, devices } from '@playwright/test';
+
+/**
+ * Read environment variables from file.
+ * https://github.com/motdotla/dotenv
+ */
+// require('dotenv').config();
+
+/**
+ * See https://playwright.dev/docs/test-configuration.
+ */
+export default defineConfig({
+  testDir: './test/browser',
+  /* Maximum time one test can run for. */
+  timeout: 30 * 1000,
+  expect: {
+    /**
+     * Maximum time expect() should wait for the condition to be met.
+     * For example in `await expect(locator).toHaveText();`
+     */
+    timeout: 5000,
+  },
+  /* Run tests in files in parallel */
+  fullyParallel: true,
+  /* Fail the build on CI if you accidentally left test.only in the source code. */
+  forbidOnly: !!process.env.CI,
+  /* Retry on CI only */
+  retries: process.env.CI ? 2 : 0,
+  /* Opt out of parallel tests on CI. */
+  workers: process.env.CI ? 1 : undefined,
+  /* Reporter to use. See https://playwright.dev/docs/test-reporters */
+  reporter: 'html',
+  /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
+  use: {
+    /* Maximum time each action such as `click()` can take. Defaults to 0 (no limit). */
+    actionTimeout: 0,
+    /* Base URL to use in actions like `await page.goto('/')`. */
+    baseURL: 'http://localhost:4000/design-system/',
+
+    /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
+    trace: 'on-first-retry',
+  },
+
+  /* Configure projects for major browsers */
+  projects: [
+    {
+      name: 'chromium',
+      use: { ...devices['Desktop Chrome'] },
+    },
+
+    {
+      name: 'firefox',
+      use: { ...devices['Desktop Firefox'] },
+    },
+
+    {
+      name: 'webkit',
+      use: { ...devices['Desktop Safari'] },
+    },
+
+    /* Test against mobile viewports. */
+    // {
+    //   name: 'Mobile Chrome',
+    //   use: { ...devices['Pixel 5'] },
+    // },
+    // {
+    //   name: 'Mobile Safari',
+    //   use: { ...devices['iPhone 12'] },
+    // },
+
+    /* Test against branded browsers. */
+    // {
+    //   name: 'Microsoft Edge',
+    //   use: { channel: 'msedge' },
+    // },
+    // {
+    //   name: 'Google Chrome',
+    //   use: { channel: 'chrome' },
+    // },
+  ],
+
+  /* Folder for test artifacts such as screenshots, videos, traces, etc. */
+  // outputDir: 'test-results/',
+
+  /* Run your local dev server before starting the tests */
+  // webServer: {
+  //   command: 'npm run start',
+  //   port: 3000,
+  // },
+});

test/browser/docs/interstitial.spec.js

@@ -0,0 +1,27 @@
+import { test, expect } from '@playwright/test';
+
+test.describe('CMS interstitial page with editing instructions', () => {
+  test.describe('Editing a component page', () => {
+    test.beforeEach(async ({ page }) => {
+      await page.goto('/design-system/components/banner-notification');
+      const editButton = await page.locator('#edit-page');
+      await expect(editButton).toBeVisible();
+      await editButton.click();
+    });
+
+    test("should show the interstitial if the user hasn't seen it before", async ({
+      page,
+    }) => {
+      await expect(page).toHaveTitle(
+        'Updating this website - CFPB Design System'
+      );
+    });
+
+    test.skip('should not show the interstitial if the user has already seen it', async ({
+      page,
+    }) => {
+      await expect(page.locator('button:text("Delete entry")')).toBeVisible();
+      await expect(page).toHaveTitle('Content Manager');
+    });
+  });
+});

test/browser/docs/netlify-cms.spec.js

@@ -0,0 +1,108 @@
+import { test, expect } from '@playwright/test';
+
+test.describe('Netlify CMS', () => {
+  const WAIT_FOR_DISPLAY_TIMEOUT = 60000;
+
+  test.describe('Editing the homepage', () => {
+    test.beforeEach(async ({ page }) => {
+      await page.goto(
+        '/design-system/admin/#/collections/special-pages/entries/home'
+      );
+      //await browser.pause(300);
+      const loginButton = await page.getByRole('button', { name: /Login/i });
+      // Wait for page to load netlify configuration and show the login button.
+      await expect(loginButton).toBeVisible();
+      await loginButton.click();
+    });
+
+    test('should allow the user to log in', async ({ page }) => {
+      const editorContainer = await page.locator('text=Page title');
+      // Wait for page to load netlify editor.
+      await expect(editorContainer).toBeVisible({
+        timeout: WAIT_FOR_DISPLAY_TIMEOUT,
+      });
+    });
+
+    test('should properly render a preview of a page', async ({ page }) => {
+      // The homepage's body field
+      const pageBodyField = await page.locator('#nc-root #description-field-2');
+      await expect(pageBodyField).toBeVisible({
+        timeout: WAIT_FOR_DISPLAY_TIMEOUT,
+      });
+      await pageBodyField.fill('');
+      await page.keyboard.press('Meta+A');
+      await page.keyboard.press('Backspace');
+      await pageBodyField.type('fun');
+      // The preview pane is an iframe
+      const previewPane = await page
+        .frameLocator('iframe#preview-pane')
+        .locator('body');
+      await expect(previewPane).toContainText('fun');
+    });
+  });
+
+  test.describe('Editing a component page', () => {
+    test.beforeEach(async ({ page }) => {
+      await page.reload();
+      await page.goto(
+        '/design-system/admin/#/collections/pages/entries/buttons'
+      );
+      // Make the browser a little wider than normal to prevent the "show details" tabs
+      // from triggering their mobile media queries
+      await page.setViewportSize({ width: 1850, height: 800 });
+      const loginButton = await page.getByRole('button', { name: /Login/i });
+      // Wait for page to load netlify configuration and show the login button.
+      await expect(loginButton).toBeVisible();
+      await loginButton.click();
+    });
+
+    test('should properly render a preview of a component page', async ({
+      page,
+    }) => {
+      // The button page's title field
+      const pageTitleField = await page.locator('#nc-root #title-field-1');
+      await expect(pageTitleField).toBeVisible({
+        timeout: WAIT_FOR_DISPLAY_TIMEOUT,
+      });
+      await pageTitleField.fill('');
+      await pageTitleField.type('best');
+      // The preview pane is an iframe
+      const previewPane = await page
+        .frameLocator('iframe#preview-pane')
+        .locator('body');
+      await expect(previewPane).toContainText('best');
+    });
+
+    test('should support switching between the various "show details" tabs', async ({
+      page,
+    }) => {
+      await page.setViewportSize({ width: 2000, height: 2000 });
+      // Wait for the editor to load
+      const editorContainer = await page.locator('text=Page title');
+      await expect(editorContainer).toBeVisible({
+        timeout: WAIT_FOR_DISPLAY_TIMEOUT,
+      });
+      // The preview pane is an iframe
+      const detailsButton = await page
+        .frameLocator('iframe#preview-pane')
+        .getByRole('button', { name: 'Show details' })
+        .first();
+      //const detailsButton = await page.locator('button=Show details');
+      await detailsButton.click();
+      //const implementationButton = await page.getByRole('link', {
+      //  name: 'Implementation',
+      //});
+      const implementationButton = await page
+        .frameLocator('iframe#preview-pane')
+        .getByRole('link', { name: 'Implementation' })
+        .first();
+      await implementationButton.click();
+      // Move one level up the DOM tree
+      const implementationButtonParent = await page
+        .frameLocator('iframe#preview-pane')
+        .locator('li.m-tabs_list-item-selected')
+        .first();
+      await expect(implementationButtonParent).toContainText('Implementation');
+    });
+  });
+});