Skip to content

Commit

Permalink
test(e2e): add playwright tests + action (freeCodeCamp#304)
Browse files Browse the repository at this point in the history
Co-authored-by: Niraj Nandish <[email protected]>
  • Loading branch information
ojeytonwilliams and Nirajn2311 authored Nov 9, 2023
1 parent f55d42b commit 3502241
Show file tree
Hide file tree
Showing 8 changed files with 263 additions and 3 deletions.
55 changes: 55 additions & 0 deletions .github/workflows/playwright.yml
Original file line number Diff line number Diff line change
@@ -0,0 +1,55 @@
name: Playwright Tests
on:
push:
branches: main
pull_request:
branches: main
jobs:
test:
timeout-minutes: 60
runs-on: ubuntu-22.04
strategy:
fail-fast: false
matrix:
browsers: [chromium, firefox, webkit]
services:
postgres:
image: postgres:14
ports:
- 5432:5432
env:
POSTGRES_USER: strapi
POSTGRES_PASSWORD: password
POSTGRES_DB: strapi
mailhog:
image: mailhog/mailhog
ports:
- 1025:1025
steps:
- uses: actions/checkout@v3
- uses: actions/setup-node@v3
with:
node-version: 18
cache: npm
- name: Install dependencies
run: npm ci
- name: Seed database
run: npm run seed
- name: Build apps
run: npm run build
- name: Install Playwright Browsers
run: npx playwright install --with-deps
- name: Run Playwright tests
run: npx playwright test --project=${{ matrix.browsers }}
- uses: actions/upload-artifact@v3
if: always()
with:
name: playwright-report
path: playwright-report/
retention-days: 30
- uses: actions/upload-artifact@v3
if: always()
with:
name: traces
path: test-results/
retention-days: 30
9 changes: 8 additions & 1 deletion .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -110,4 +110,11 @@ dist
.DS_Store

# Turborepo
.turbo
.turbo

# Playwright
/test-results/
/playwright-report/
/blob-report/
/playwright/.cache/
/playwright/.auth
2 changes: 1 addition & 1 deletion apps/backend/sample.env
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
HOST=0.0.0.0
HOST=localhost
PORT=1337

# Secret keys
Expand Down
25 changes: 25 additions & 0 deletions e2e/auth.setup.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
import { test as setup, expect } from "@playwright/test";

const authFile = "playwright/.auth/user.json";

setup("authenticate", async ({ page }) => {
await page.goto("/");
const emailField = page.getByLabel("Email");
const passwordField = page.getByLabel("Password");
const signinButton = page.getByRole("button", { name: "Sign in with email" });

await page.getByRole("button", { name: "Sign in" }).click();
await emailField.click();
await emailField.fill("[email protected]");
await emailField.press("Tab");
await expect(passwordField).toBeFocused();
await passwordField.fill("editor");
await passwordField.press("Tab");
await expect(signinButton).toBeFocused();
await signinButton.click();

// Wait until the page receives the cookies.

await page.waitForURL("**/posts");
await page.context().storageState({ path: authFile });
});
10 changes: 10 additions & 0 deletions e2e/posts.spec.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
import { test, expect } from "@playwright/test";

test("has a button to create a new post", async ({ page }) => {
await page.goto("/posts");

await page.getByRole("button", { name: "New post" }).click();

await expect(page).toHaveURL(/.*\/posts\/\d+/);
await expect(page.getByRole("link", { name: "Posts" })).toBeVisible();
});
63 changes: 62 additions & 1 deletion package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

4 changes: 4 additions & 0 deletions package.json
Original file line number Diff line number Diff line change
@@ -1,13 +1,17 @@
{
"devDependencies": {
"@playwright/test": "^1.39.0",
"@types/node": "^20.8.10",
"husky": "^8.0.0",
"lint-staged": "^14.0.0",
"turbo": "1.10.16"
},
"scripts": {
"build": "turbo build",
"prepare": "husky install",
"lint": "turbo lint --continue",
"seed": "turbo seed",
"start": "turbo start",
"develop": "turbo develop",
"run-tools": "cd tools && docker compose up -d && cd .."
},
Expand Down
98 changes: 98 additions & 0 deletions playwright.config.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,98 @@
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: "./e2e",
/* 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: {
/* Base URL to use in actions like `await page.goto('/')`. */
baseURL: "http://localhost:3000",

/* 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: "setup", testMatch: /.*\.setup\.ts/ },
{
name: "chromium",
use: {
...devices["Desktop Chrome"],
storageState: "playwright/.auth/user.json",
},
dependencies: ["setup"],
},

{
name: "firefox",
use: {
...devices["Desktop Firefox"],
storageState: "playwright/.auth/user.json",
},
dependencies: ["setup"],
},

{
name: "webkit",
use: {
...devices["Desktop Safari"],
storageState: "playwright/.auth/user.json",
},
dependencies: ["setup"],
},

/* 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: { ...devices['Desktop Edge'], channel: 'msedge' },
// },
// {
// name: 'Google Chrome',
// use: { ...devices['Desktop Chrome'], channel: 'chrome' },
// },
],

/* Run your local dev server before starting the tests */
// Using port so that playwright will wait for either 127.0.0.1 or ::1
webServer: [
{
command: "npm run start -- --filter=backend",
port: 1337,
reuseExistingServer: !process.env.CI,
},
{
command: "npm run start -- --filter=frontend",
port: 3000,
reuseExistingServer: !process.env.CI,
},
],
});

0 comments on commit 3502241

Please sign in to comment.