如何使用 Playwright 和 Docker 运行端到端测试

1mkdir playwright-with-docker

1cd playwright-with-docker

1npm init

 1[secondary_label Output]
 2package name: (playwright-docker)
 3version: (1.0.0)
 4description:
 5entry point: (index.js)
 6test command:
 7git repository:
 8keywords:
 9author:
10license: (ISC)

 1[secondary_label Output]
 2This utility will walk you through creating a package.json file.
 3It only covers the most common items, and tries to guess sensible defaults.
 4
 5See `npm help init` for definitive documentation on these fields
 6and exactly what they do.
 7
 8Use `npm install <pkg>` afterward to install a package and
 9save it as a dependency in the package.json file.
10
11Press ^C at any time to quit.
12package name: (test) playwright-docker
13version: (1.0.0)
14description: A project for using playwright for end-to-end testing purpose with docker for deployment
15entry point: (index.js)
16test command:
17git repository:
18keywords:
19author: 
20license: (ISC)
21About to write to /your-path/test/package.json:
22
23{
24  "name": "playwright-docker",
25  "version": "1.0.0",
26  "description": "A project for using playwright for end-to-end testing purpose with docker for deployment",
27  "main": "index.js",
28  "scripts": {
29  "test": "echo \"Error: no test specified\" && exit 1"
30  },
31  "author": 
32  "license": "ISC"
33}
34
35Is this OK? (yes) yes

1npm install --save-dev playwright
2npm install --save-dev typescript

1npm install --save-dev @types/node

1npm install --save-dev toml

1npx playwright install-deps

1[secondary_label Output]
2You are running Node.js 10.19.0.
3Playwright requires Node.js 12 or higher. 
4Please update your version of Node.js.

1sudo npm cache clean -f 
2sudo npm install -g n 
3sudo n stable

1npm install --save-dev @playwright/test

1npx playwright install

1sudo nano tsconfig.json

1[label tsconfig.json]
2{
3  "compilerOptions": {
4    "strict": true,
5    "module": "commonjs"
6  },
7  "include": ["tests"]
8}

1mkdir tests

1cd tests

1nano configTypes.ts

 1[label configTypes.ts]
 2import { Browser, Page } from "playwright";
 3
 4import fs from 'fs';
 5import toml from 'toml';
 6const config = toml.parse(fs.readFileSync('./config.toml', 'utf-8'));
 7
 8declare global {
 9  const page: Page;
10  const browser: Browser;
11  const browserName: string;
12}
13
14export default {
15  DIGITAL_OCEAN_URL: config.digital_ocean_url ?? '',
16  };

1nano signUpMethods.spec.ts

 1[label signUpMethods.spec.ts]
 2import endpoint from "./configTypes"
 3import { test, expect } from '@playwright/test'
 4
 5test("Expect to have 3 options for signing up", async ({ page }) => {
 6
 7  // Go to the Droplets product page of DigitalOcean web page
 8  await page.goto(endpoint.DIGITAL_OCEAN_URL);
 9
10  // Wait for the page to load
11  await page.waitForLoadState('networkidle');
12
13  // Get the number of signUp options
14  const number_subscriptions_allowed = await page.locator('.SignupButtonsStyles__ButtonContainer-sc-yg5bly-0 > a').count()
15
16  // Verify that number equals 3
17  expect(number_subscriptions_allowed).toBe(3)
18});

1nano multiplePackages.spec.ts

 1[label multiplePackages.spec.ts]
 2import endpoint from "./configTypes"
 3import { test, expect } from '@playwright/test'
 4
 5test("Expect to have 3 packages for subscription", async ({ page }) => {
 6
 7  // Go to the Droplets product page of DigitalOcean web page
 8  await page.goto(endpoint.DIGITAL_OCEAN_URL);
 9
10  // Wait for the page to load
11  await page.waitForLoadState('networkidle');
12
13  // Get the number of packages to be 2 (Basic and Premium)
14  const number_subscriptions_allowed = await page.locator('.CPUInfoStyles__StyledLeftCpuInfo-sc-ooo7a2-4 > div').count()
15
16  // Verify that number equals 2
17  expect(number_subscriptions_allowed).toBe(2)
18});

1nano pricingComparison.spec.ts

 1[label pricingComparison.spec.ts]
 2import endpoint from "./configTypes"
 3import { test, expect } from '@playwright/test'
 4
 5test("Expect to have 3 packages for subscription", async ({ page }) => {
 6
 7  // Go to the Droplets product page of DigitalOcean web page
 8  await page.goto(endpoint.DIGITAL_OCEAN_URL);
 9
10  // Wait for the page to load
11  await page.waitForLoadState('networkidle');
12
13  // Get the number of basic virtual machine costs (1 CPU, 2 CPU, 4 CPU, 8 CPU)
14  const number_subscriptions_allowed = await page.locator('.PricingComparisonToolStyles__StyledCpuSelector-sc-1k0sndv-7 > button').count()
15
16  // Verify that number equals 4
17  expect(number_subscriptions_allowed).toBe(4)
18});

1cd ..

1nano config.toml

1[label config.toml]
2digital_ocean_url="https://www.digitalocean.com/products/droplets"

1npx playwright test --browser=all

 1[secondary_label Output]
 2Running 9 tests using 1 worker
 3
 4  ✓  [chromium] › tests/multiplePackages.spec.ts:4:1 › Expect to have 3 packages for subscription (6s)
 5  ✓  [chromium] › tests/pricingComparison.spec.ts:4:1 › Expect to have 3 packages for subscription (4s)
 6  ✓  [chromium] › tests/signUpMethods.spec.ts:4:1 › Expect to have 3 options for signing up (3s)
 7  ✓  [firefox] › tests/multiplePackages.spec.ts:4:1 › Expect to have 3 packages for subscription (9s)
 8  ✓  [firefox] › tests/pricingComparison.spec.ts:4:1 › Expect to have 3 packages for subscription (5s)
 9  ✓  [firefox] › tests/signUpMethods.spec.ts:4:1 › Expect to have 3 options for signing up (7s)
10  ✓  [webkit] › tests/multiplePackages.spec.ts:4:1 › Expect to have 3 packages for subscription (7s)
11  ✓  [webkit] › tests/pricingComparison.spec.ts:4:1 › Expect to have 3 packages for subscription (6s)
12  ✓  [webkit] › tests/signUpMethods.spec.ts:4:1 › Expect to have 3 options for signing up (6s)
13
14  9 passed (1m)

1npx playwright test --browser=all --reporter=html

1[secondary_label Output]
2Running 9 tests using 2 workers
3
4  9 passed (40s)
5
6To open last HTML report run:
7
8  npx playwright show-report

1npx playwright show-report

1[secondary_label Output]
2Serving HTML report at http://your_ip_address:9323. Press Ctrl+C to quit.

1[environment local]
2ssh -L 9323:localhost:9323 your_non_root_user@your_server_ip

1nano package.json

1[label package.json]
2...
3 "scripts": {
4  "test": "playwright test --browser=all",
5  "test-html-report": "playwright test --browser=all --reporter=html",
6  "test-json-report": "PLAYWRIGHT_JSON_OUTPUT_NAME=results.json playwright test --browser=chromium --reporter=json"
7  },

1npm run test-html-report

1npx playwright test --browser=all --reporter=html

 1{
 2  "name": "playwright-docker",
 3  "version": "1.0.0",
 4  "description": "A project for using playwright for end-to-end testing purpose with docker for deployment",
 5  "main": "index.js",
 6  "scripts": {
 7  "test": "playwright test --browser=all",
 8  "test-html-report": "playwright test --browser=all --reporter=html",
 9  "test-json-report": "PLAYWRIGHT_JSON_OUTPUT_NAME=results.json playwright test --browser=chromium --reporter=json"
10  },
11  "author": "",
12  "license": "ISC",
13  "devDependencies": {
14  "@playwright/test": "^1.22.2",
15  "@types/node": "^17.0.35",
16  "playwright": "^1.22.1",
17  "toml": "^3.0.0",
18  "typescript": "^4.6.4"
19  }
20}

1nano Dockerfile

 1[label Dockerfile]
 2# Get the base image of Node version 16
 3FROM node:16
 4
 5# Get the latest version of Playwright
 6FROM mcr.microsoft.com/playwright:focal
 7
 8# Set the work directory for the application
 9WORKDIR /app
10
11# Set the environment path to node_modules/.bin
12ENV PATH /app/node_modules/.bin:$PATH
13
14# COPY the needed files to the app folder in Docker image
15COPY package.json /app/
16COPY tests/ /app/tests/
17COPY tsconfig.json /app/
18COPY config.toml /app/
19
20# Get the needed libraries to run Playwright
21RUN apt-get update && apt-get -y install libnss3 libatk-bridge2.0-0 libdrm-dev libxkbcommon-dev libgbm-dev libasound-dev libatspi2.0-0 libxshmfence-dev
22
23# Install the dependencies in Node environment
24RUN npm install

1docker build -t playwright-docker .

 1[secondary_label Output]
 2Sending build context to Docker daemon 76.61MB
 3...
 4added 6 packages, and audited 7 packages in 6s
 5
 6found 0 vulnerabilities
 7Removing intermediate container 87520d179fd1
 8 ---> 433ae116d06a
 9Successfully built 433ae116d06a
10Successfully tagged playwright-docker:latest

1docker image ls

1[secondary_label Output]
2REPOSITORY TAG IMAGE ID CREATED SIZE
3playwright-docker latest 433ae116d06a 5 minutes ago 1.92GB
4mcr.microsoft.com/playwright focal bb9872cfd272 2 days ago 1.76GB
5node 16 c6b745e900c7 6 days ago 907MB

1docker run -it playwright-docker:latest npm run test

 1[secondary_label Output]
 2> [email protected] test
 3> playwright test --browser=all
 4
 5Running 9 tests using 2 workers
 6
 7  ✓  [chromium] › tests/pricingComparison.spec.ts:4:1 › Expect to have 4 pricing options (7s)
 8  ✓  [chromium] › tests/multiplePackages.spec.ts:4:1 › Expect to have 2 packages for subscription (8s)
 9  ✓  [chromium] › tests/signUpMethods.spec.ts:4:1 › Expect to have 3 options for signing up (8s)
10  ✓  [firefox] › tests/multiplePackages.spec.ts:4:1 › Expect to have 2 packages for subscription (9s)
11  ✓  [firefox] › tests/pricingComparison.spec.ts:4:1 › Expect to have 4 pricing options (8s)
12  ✓  [firefox] › tests/signUpMethods.spec.ts:4:1 › Expect to have 3 options for signing up (5s)
13  ✓  [webkit] › tests/multiplePackages.spec.ts:4:1 › Expect to have 2 packages for subscription (8s)
14  ✓  [webkit] › tests/pricingComparison.spec.ts:4:1 › Expect to have 4 pricing options (10s)
15  ✓  [webkit] › tests/signUpMethods.spec.ts:4:1 › Expect to have 3 options for signing up (7s)
16
17  9 passed (41s)