chore(e2e): change from puppeteer to playwright in integration tests (u…

…ber#4937)

* chore(e2e): use playwright in e2e tests

* chore(e2e): update integration tests to playwright

* chore(e2e): use playwright docker image

* chore(e2e): workers and vrt cwd

* chore(playwright): fix vrt

* fix(e2e): handle ci errors

* fix(vrt): update failing vrt behavior

* fix(playwright): build e2e server in web image

* test(vrt): update visual snapshots for 93466d6 (uber#4946)

Co-authored-by: UberOpenSourceBot <[email protected]>

* fix(select): migrate test to playwright

* test(vrt): update visual snapshots for c9226e1 uber#4947)

Co-authored-by: UberOpenSourceBot <[email protected]>

* fix(e2e): correct some tests

* fix(map-marker): make map circle transparent for snapshots

* test(vrt): update visual snapshots for eaa8c73 (uber#4950)

Co-authored-by: UberOpenSourceBot <[email protected]>

Co-authored-by: UberOpenSourceBot <[email protected]>
Co-authored-by: UberOpenSourceBot <[email protected]>

.buildkite/pipeline.yml

@@ -1,18 +1,27 @@
 steps:
   # Build the image in a single place for all parallel steps to leverage the same image.
-  - name: ':docker: :package: build'
+  - name: ':docker: :package: build web-base-image'
     plugins:
       'docker-compose#v3.0.3':
         build:
           - baseui
-          - e2e-test
           - e2e-server
           - e2e-server-healthy
         image-repository: 027047743804.dkr.ecr.us-east-2.amazonaws.com/uber
         env: DOCKER_BUILDKIT=1
     agents:
       queue: builders
 
+  - name: ':docker: :package: build playwright'
+    plugins:
+      'docker-compose#v3.0.3':
+        build:
+          - e2e-test
+        image-repository: 027047743804.dkr.ecr.us-east-2.amazonaws.com/uber
+        env: DOCKER_BUILDKIT=1
+    agents:
+      queue: builders
+
   # Wait until all images are built.
   # This way we can download the built image from a registry instead of building each for each test task.
   - wait
@@ -112,11 +121,9 @@ steps:
       queue: workers
 
   - name: e2e
-    # we have to install puppeteer here to trigger the install.js script
-    # and also to make sure we do not add this to the released build artifact
     command: yarn e2e:test:ci
     artifact_paths:
-      - '__artifacts__/*.png'
+      - 'test-results/**/*'
     plugins:
       'docker-compose#v3.0.3':
         run: e2e-test
@@ -129,7 +136,7 @@ steps:
   - name: ':react: react@18 e2e'
     command: yarn upgrade react@^18.0.0 react-dom@^18.0.0 && yarn e2e:test:ci
     artifact_paths:
-      - '__artifacts__/*.png'
+      - 'test-results/**/*'
     plugins:
       'docker-compose#v3.0.3':
         run: e2e-test
@@ -142,7 +149,7 @@ steps:
   - name: vrt
     command: yarn vrt:ci
     artifact_paths:
-      - '__artifacts__/*.png'
+      - 'test-results/**/*'
     plugins:
       'docker-compose#v3.0.3':
         run: e2e-test
@@ -160,7 +167,7 @@ steps:
       - exit_status: 2
     plugins:
       'docker-compose#v3.0.3':
-        run: baseui
+        run: e2e-test
     agents:
       queue: workers
 

.eslintrc.js

@@ -26,7 +26,6 @@ module.exports = {
     page: true,
     browser: true,
     context: true,
-    jestPuppeteer: true,
   },
   settings: {
     react: {
@@ -63,7 +62,7 @@ module.exports = {
         singleQuote: true,
         trailingComma: 'es5',
         bracketSpacing: true,
-        jsxBracketSameLine: false,
+        bracketSameLine: false,
       },
     ],
     'import/prefer-default-export': ['off'],
@@ -101,5 +100,12 @@ module.exports = {
         'flowtype/require-valid-file-annotation': 'off',
       },
     },
+    {
+      files: ['**/*.e2e.js'],
+      rules: {
+        'flowtype/require-valid-file-annotation': 'off',
+        'jest/no-identical-title': 'off',
+      },
+    },
   ],
 };

.github/CODEOWNERS

@@ -1,4 +1,4 @@
 # Learn how to add code owners here:
 # https://help.github.com/en/articles/about-code-owners
 * @chasestarr @tajo @lhbrennan @williamernest
-/vrt/__image_snapshots__/ @ghost
+/vrt/tests.vrt.js-snapshots/ @ghost

.gitignore

@@ -26,5 +26,6 @@ public
 !documentation-site/public
 versions.json
 __artifacts__
+test-results
 # Local Netlify folder
 .netlify

.prettierrc

@@ -6,5 +6,5 @@
   "singleQuote": true,
   "trailingComma": "es5",
   "bracketSpacing": true,
-  "jsxBracketSameLine": false
+  "bracketSameLine": false
 }

CONTRIBUTING.md

@@ -30,11 +30,11 @@ yarn unit-test
 
 # to run a specific unit test:
 yarn unit-test src/button/__tests__/button.test.js
-````
+```
 
 ### End-to-end tests
 
-E2E test files end with a `.e2e.js` extension. These tests can launch a web page and interact with it using the [puppeteer](https://pptr.dev/) library. `mount` function calls within those tests reference the names of `.scenario.js` files. These tests require the baseui library to be compiled before running, so will involve a couple more steps than other testing strategies. If you make a change to library code, you will need to recompile before running e2e tests.
+E2E test files end with a `.e2e.js` extension. These tests can launch a web page and interact with it using the [playwright](https://playwright.dev/) library. `mount` function calls within those tests reference the names of `.scenario.js` files. These tests require the baseui library to be compiled before running, so will involve a couple more steps than other testing strategies. If you make a change to library code, you will need to recompile before running e2e tests.
 
 ```bash
 # in one shell build the library:

Dockerfile

@@ -2,8 +2,6 @@ FROM uber/web-base-image:14.15.4-buster
 
 WORKDIR /baseui
 
-# Install zhCn fonts
-RUN apt update --allow-releaseinfo-change && apt install fonts-wqy-zenhei
 # Copy manifests and install dependencies.
 # Doing this before a build step can more effectively leverage Docker caching.
 COPY package.json yarn.lock /baseui/
@@ -17,5 +15,4 @@ RUN cd packages/baseweb-vscode-extension && yarn
 
 # Perform any build steps if you want binaries inside of the image
 RUN yarn build
-RUN yarn build:documentation-site-files
 RUN yarn e2e:build

Dockerfile-playwright

@@ -0,0 +1,16 @@
+FROM mcr.microsoft.com/playwright:v1.19.2-focal
+
+WORKDIR /baseui
+
+# Install zhCn fonts
+RUN apt update --allow-releaseinfo-change && apt install fonts-wqy-zenhei
+# Copy manifests and install dependencies.
+# Doing this before a build step can more effectively leverage Docker caching.
+COPY package.json yarn.lock /baseui/
+RUN yarn
+RUN yarn playwright install --with-deps
+
+# Copy the current files to the docker image.
+COPY . .
+
+RUN yarn e2e:build

docker-compose.yml

@@ -7,11 +7,7 @@ services:
     expose:
       - 8080
     healthcheck:
-      test:
-        [
-          'CMD-SHELL',
-          'curl -H "Accept: text/html" -f http://e2e-server:8080 || exit 1',
-        ]
+      test: ['CMD-SHELL', 'curl -H "Accept: text/html" -f http://e2e-server:8080 || exit 1']
       interval: 5s
       timeout: 10s
       retries: 5
@@ -29,12 +25,15 @@ services:
 
   # running the e2e tests in ci
   e2e-test:
-    build: .
+    build:
+      context: .
+      dockerfile: Dockerfile-playwright
     links:
       - e2e-server
     volumes:
       - ./__artifacts__:/baseui/__artifacts__:delegated
-      - ./vrt/__image_snapshots__:/baseui/vrt/__image_snapshots__:delegated
+      - ./test-results:/baseui/test-results:delegated
+      - ./vrt/tests.vrt.js-snapshots:/baseui/vrt/tests.vrt.js-snapshots:delegated
     depends_on:
       - e2e-server-healthy
     environment:
@@ -49,6 +48,7 @@ services:
       - BUILDKITE_COMMIT
       - BUILDKITE_PULL_REQUEST
       - BUILDKITE_PULL_REQUEST_REPO
+      - BUILDKITE_UBEROPENSOURCE_API_TOKEN
       - GITHUB_BOT_AUTH_TOKEN
       - GITHUB_BOT_EMAIL
       - GITHUB_BOT_NAME
@@ -57,6 +57,7 @@ services:
     build: .
     volumes:
       - ./__artifacts__:/baseui/__artifacts__:delegated
+      - ./test-results:/baseui/test-results:delegated
     environment:
       - CODECOV_TOKEN
       - CI=true