add playwright test example

.github/workflows/playwright.yaml

@@ -0,0 +1,23 @@
+name: Playwright Tests
+on: [pull_request]
+jobs:
+  test:
+    timeout-minutes: 60
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 18
+      - name: Install dependencies
+        run: yarn install --frozen-lockfile
+      - name: Install Playwright Browsers
+        run: npx playwright install --with-deps
+      - name: Run Playwright tests
+        run: npx playwright test
+      - uses: actions/upload-artifact@v3
+        if: always()
+        with:
+          name: playwright-report
+          path: playwright-report/
+          retention-days: 30

.gitignore

@@ -34,4 +34,6 @@ yarn-error.log*
 *.tsbuildinfo
 next-env.d.ts
 
-cypress/videos
+cypress/videos
+
+/test-results

README.md

@@ -1,4 +1,5 @@
 ![cypress workflow](https://github.com/claudivanfilho/next-server-rendering-app/actions/workflows/main.yaml/badge.svg)
+![playwright workflow](https://github.com/claudivanfilho/next-server-rendering-app/actions/workflows/playwright.yaml/badge.svg)
 
 ## Next 13 Sample App
 
@@ -10,10 +11,12 @@ Technologies and concepts used in this project:
 - New app directory feature enabled
 - i18n with next-intl (route based intl)
 - Cypress tests
+- Playwright test example
 - Visual testing with [percy.io](https://percy.io/)
 - Github Actions
   - Continuous integration configured (cypress cloud + percy + parallelization)
   - Branch preview with vercel configured
+  - Playwright workflow
 - Preserve scroll implemented in the main listing
 
 ## Getting Started

cypress.config.js

@@ -12,4 +12,5 @@ export default defineConfig({
       bundler: "webpack",
     },
   },
+  retries: 2,
 });

package.json

@@ -8,6 +8,7 @@
     "start": "next start",
     "lint": "next lint",
     "percy:cypress": "percy exec -- npm run e2e:headless",
+    "playwright": "playwright test",
     "cypress": "cypress open",
     "e2e": "start-server-and-test dev http://localhost:3000 \"cypress open --e2e\"",
     "e2e:headless": "start-server-and-test dev http://localhost:3000 \"cypress run --e2e\"",
@@ -33,6 +34,7 @@
   "devDependencies": {
     "@percy/cli": "^1.26.3",
     "@percy/cypress": "^3.1.2",
+    "@playwright/test": "^1.36.2",
     "@types/node": "20.2.5",
     "@types/react": "18.2.7",
     "@types/react-dom": "18.2.4",

playwright.config.ts

@@ -0,0 +1,77 @@
+import { devices, PlaywrightTestConfig } from "@playwright/test";
+import path from "path";
+
+// Use process.env.PORT by default and fallback to port 3000
+const PORT = process.env.PORT || 3000;
+
+// Set webServer.url and use.baseURL with the location of the WebServer respecting the correct set port
+const baseURL = `http://localhost:${PORT}`;
+
+// Reference: https://playwright.dev/docs/test-configuration
+const config: PlaywrightTestConfig = {
+  // Timeout per test
+  timeout: 30 * 1000,
+  // Test directory
+  testDir: path.join(__dirname, "playwright"),
+  // If a test fails, retry it additional 2 times
+  retries: 2,
+  // Artifacts folder where screenshots, videos, and traces are stored.
+  outputDir: "test-results/",
+
+  // Run your local dev server before starting the tests:
+  // https://playwright.dev/docs/test-advanced#launching-a-development-web-server-during-the-tests
+  webServer: {
+    command: "npm run dev",
+    url: baseURL,
+    timeout: 120 * 1000,
+    reuseExistingServer: !process.env.CI,
+  },
+
+  use: {
+    // Use baseURL so to make navigations relative.
+    // More information: https://playwright.dev/docs/api/class-testoptions#test-options-base-url
+    baseURL,
+
+    // Retry a test if its failing with enabled tracing. This allows you to analyse the DOM, console logs, network traffic etc.
+    // More information: https://playwright.dev/docs/trace-viewer
+    trace: "retry-with-trace",
+
+    // All available context options: https://playwright.dev/docs/api/class-browser#browser-new-context
+    // contextOptions: {
+    //   ignoreHTTPSErrors: true,
+    // },
+  },
+
+  projects: [
+    {
+      name: "Desktop Chrome",
+      use: {
+        ...devices["Desktop Chrome"],
+      },
+    },
+    // {
+    //   name: 'Desktop Firefox',
+    //   use: {
+    //     ...devices['Desktop Firefox'],
+    //   },
+    // },
+    // {
+    //   name: 'Desktop Safari',
+    //   use: {
+    //     ...devices['Desktop Safari'],
+    //   },
+    // },
+    // Test against mobile viewports.
+    {
+      name: "Mobile Chrome",
+      use: {
+        ...devices["Pixel 5"],
+      },
+    },
+    {
+      name: "Mobile Safari",
+      use: devices["iPhone 12"],
+    },
+  ],
+};
+export default config;

playwright/Generations.spec.ts

@@ -0,0 +1,20 @@
+import { expect, test } from "@playwright/test";
+
+test("when initiated should render the generations page", async ({ page }) => {
+  await page.goto("/");
+  await expect(page.locator("h1")).toContainText("PokeSearch");
+  await expect(page.locator("a")).toHaveCount(9);
+});
+
+test("when tried to access an invalid route should display an error message", async ({ page }) => {
+  await page.goto("/test");
+  await expect(page.locator("text=Page Not Found")).toBeDefined();
+});
+
+test("when clicked in a generation link should redirect to generation page", async ({ page }) => {
+  await page.goto("/");
+
+  await page.getByRole("link", { name: "Generation I", exact: true }).click();
+
+  await expect(page).toHaveURL(/.*\/generation\/1/);
+});

yarn.lock

@@ -535,6 +535,16 @@
     picocolors "^1.0.0"
     tslib "^2.5.0"
 
+"@playwright/test@^1.36.2":
+  version "1.36.2"
+  resolved "https://registry.yarnpkg.com/@playwright/test/-/test-1.36.2.tgz#9edd68a02b0929c5d78d9479a654ceb981dfb592"
+  integrity sha512-2rVZeyPRjxfPH6J0oGJqE8YxiM1IBRyM8hyrXYK7eSiAqmbNhxwcLa7dZ7fy9Kj26V7FYia5fh9XJRq4Dqme+g==
+  dependencies:
+    "@types/node" "*"
+    playwright-core "1.36.2"
+  optionalDependencies:
+    fsevents "2.3.2"
+
 "@rushstack/eslint-patch@^1.1.3":
   version "1.3.0"
   resolved "https://registry.npmjs.org/@rushstack/eslint-patch/-/eslint-patch-1.3.0.tgz"
@@ -2027,7 +2037,7 @@ fs.realpath@^1.0.0:
   resolved "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz"
   integrity sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==
 
-fsevents@~2.3.2:
+fsevents@2.3.2, fsevents@~2.3.2:
   version "2.3.2"
   resolved "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz"
   integrity sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==
@@ -3261,6 +3271,11 @@ pirates@^4.0.1:
   resolved "https://registry.npmjs.org/pirates/-/pirates-4.0.5.tgz"
   integrity sha512-8V9+HQPupnaXMA23c5hvl69zXvTwTzyAYasnkb0Tts4XvO4CliqONMOnvlq26rkhLC3nWDFBJf73LU1e1VZLaQ==
 
+playwright-core@1.36.2:
+  version "1.36.2"
+  resolved "https://registry.yarnpkg.com/playwright-core/-/playwright-core-1.36.2.tgz#32382f2d96764c24c65a86ea336cf79721c2e50e"
+  integrity sha512-sQYZt31dwkqxOrP7xy2ggDfEzUxM1lodjhsQ3NMMv5uGTRDsLxU0e4xf4wwMkF2gplIxf17QMBCodSFgm6bFVQ==
+
 popper.js@1.16.1-lts:
   version "1.16.1-lts"
   resolved "https://registry.npmjs.org/popper.js/-/popper.js-1.16.1-lts.tgz"