Skip to content

Commit

Permalink
add playwright test example (#3)
Browse files Browse the repository at this point in the history
  • Loading branch information
claudivanfilho committed Aug 9, 2023
1 parent cb5c6fa commit d34e345
Show file tree
Hide file tree
Showing 8 changed files with 145 additions and 2 deletions.
23 changes: 23 additions & 0 deletions .github/workflows/playwright.yaml
Original file line number Diff line number Diff line change
@@ -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
4 changes: 3 additions & 1 deletion .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -34,4 +34,6 @@ yarn-error.log*
*.tsbuildinfo
next-env.d.ts

cypress/videos
cypress/videos

/test-results
3 changes: 3 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
@@ -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

Expand All @@ -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
Expand Down
1 change: 1 addition & 0 deletions cypress.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -12,4 +12,5 @@ export default defineConfig({
bundler: "webpack",
},
},
retries: 2,
});
2 changes: 2 additions & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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\"",
Expand All @@ -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",
Expand Down
77 changes: 77 additions & 0 deletions playwright.config.ts
Original file line number Diff line number Diff line change
@@ -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;
20 changes: 20 additions & 0 deletions playwright/Generations.spec.ts
Original file line number Diff line number Diff line change
@@ -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/);
});
17 changes: 16 additions & 1 deletion yarn.lock
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down Expand Up @@ -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==
Expand Down Expand Up @@ -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"
Expand Down

1 comment on commit d34e345

@vercel
Copy link

@vercel vercel bot commented on d34e345 Aug 9, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please sign in to comment.