feat: init playwright

.github/workflows/CI.yml

@@ -6,7 +6,7 @@ on:
 jobs:
     install:
         name: Install
-        runs-on: ubuntu-18.04
+        runs-on: ubuntu-latest
         continue-on-error: false
         steps:
             - name: Checkout
@@ -45,7 +45,7 @@ jobs:
                   retention-days: 1
 
     test:
-      name: Test
+      name: Unit tests
       needs: [install]
       runs-on: ubuntu-latest
       steps:
@@ -60,6 +60,33 @@ jobs:
           - name: Run tests
             run: yarn test
 
+    playwright:
+      needs: [install]
+      runs-on: ubuntu-latest
+      name: E2E tests
+      steps:
+        - name: Download artifact
+          uses: actions/download-artifact@v3
+          with:
+              name: frontend-artifact
+
+        - name: Unpack artifact
+          run: tar xf artifact.tar.gz
+
+        - name: Install Playwright
+          run: npx playwright install
+
+        - name: Waiting for 200 from the Netlify Preview
+          uses: jakepartusch/[email protected]
+          id: waitFor200
+          with:
+            site_name: "builder69"
+            max_timeout: 360 # 6 Minutes, depends on your build pipeline duration
+        - name: Run E2E Tests on Netlify URL
+          run: yarn test:e2e
+          env:
+            PLAYWRIGHT_TEST_BASE_URL: ${{ steps.waitFor200.outputs.url }}
+
     eslint:
       name: Eslint
       needs: [install]

.github/workflows/playwright.yml

@@ -0,0 +1,22 @@
+name: Playwright Tests
+on:
+  deployment_status:
+jobs:
+  test:
+    timeout-minutes: 60
+    runs-on: ubuntu-latest
+    if: github.event.deployment_status.state == 'success'
+    steps:
+      - uses: actions/checkout@v2
+      - uses: actions/setup-node@v2
+        with:
+          node-version: '14.x'
+      - name: Install dependencies
+        run: npm ci
+      - name: Install Playwright
+        run: npx playwright install --with-deps
+      - name: Run Playwright tests
+        run: npm run test:e2e
+        env:
+          # This might depend on your test-runner/language binding
+          PLAYWRIGHT_TEST_BASE_URL: ${{ github.event.deployment_status.target_url }}

.gitignore

@@ -18,6 +18,13 @@
 .env.test.local
 .env.production.local
 
+# IDE files
+/.idea
+
+# logs
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+/test-results/
+/playwright-report/
+/playwright/.cache/

package.json

@@ -3,6 +3,7 @@
   "version": "0.1.0",
   "private": false,
   "dependencies": {
+    "@playwright/test": "^1.22.2",
     "@testing-library/jest-dom": "^5.14.1",
     "@testing-library/react": "^13.0.0",
     "@testing-library/user-event": "^14.2.1",
@@ -20,6 +21,7 @@
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",
+    "test:e2e": "playwright test -c tests",
     "lint": "eslint **/*.tsx",
     "format": "yarn lint --fix",
     "stylelint": "stylelint '**/*{.css,.scss}'",
@@ -54,14 +56,14 @@
     "eslint-plugin-prettier": "^4.1.0",
     "eslint-plugin-react": "^7.30.1",
     "eslint-plugin-react-hooks": "^4.3.0",
+    "husky": "^8.0.0",
     "prettier": "^2.6.2",
     "stylelint": "^14.9.0",
     "stylelint-config-prettier": "^9.0.3",
     "stylelint-config-rational-order": "^0.1.2",
     "stylelint-config-standard": "^26.0.0",
     "stylelint-order": "^5.0.0",
     "stylelint-prettier": "^2.0.0",
-    "stylelint-scss": "^4.2.0",
-    "husky": "^8.0.0"
+    "stylelint-scss": "^4.2.0"
   }
 }

tests/example.spec.ts

@@ -0,0 +1,12 @@
+import { test, expect } from "@playwright/test";
+
+test("test", async ({ page }) => {
+  await page.goto(
+    process.env.PLAYWRIGHT_TEST_BASE_URL || "http://localhost:3000"
+  );
+
+  await expect(page.locator("text=Learn React")).toHaveAttribute(
+    "href",
+    "https://reactjs.org"
+  );
+});

yarn.lock

@@ -1510,6 +1510,14 @@
     "@nodelib/fs.scandir" "2.1.5"
     fastq "^1.6.0"
 
+"@playwright/test@^1.22.2":
+  version "1.22.2"
+  resolved "https://registry.yarnpkg.com/@playwright/test/-/test-1.22.2.tgz#b848f25f8918140c2d0bae8e9227a40198f2dd4a"
+  integrity sha512-cCl96BEBGPtptFz7C2FOSN3PrTnJ3rPpENe+gYCMx4GNNDlN4tmo2D89y13feGKTMMAIVrXfSQ/UmaQKLy1XLA==
+  dependencies:
+    "@types/node" "*"
+    playwright-core "1.22.2"
+
 "@pmmmwh/react-refresh-webpack-plugin@^0.5.3":
   version "0.5.7"
   resolved "https://registry.yarnpkg.com/@pmmmwh/react-refresh-webpack-plugin/-/react-refresh-webpack-plugin-0.5.7.tgz#58f8217ba70069cc6a73f5d7e05e85b458c150e2"
@@ -7727,6 +7735,11 @@ pkg-up@^3.1.0:
   dependencies:
     find-up "^3.0.0"
 
+[email protected]:
+  version "1.22.2"
+  resolved "https://registry.yarnpkg.com/playwright-core/-/playwright-core-1.22.2.tgz#ed2963d79d71c2a18d5a6fd25b60b9f0a344661a"
+  integrity sha512-w/hc/Ld0RM4pmsNeE6aL/fPNWw8BWit2tg+TfqJ3+p59c6s3B6C8mXvXrIPmfQEobkcFDc+4KirNzOQ+uBSP1Q==
+
 posix-character-classes@^0.1.0:
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/posix-character-classes/-/posix-character-classes-0.1.1.tgz#01eac0fe3b5af71a2a6c02feabb8c1fef7e00eab"