feat: add api mocking tests

This commit is contained in:
Debbie O'Brien 2023-06-29 19:54:34 +02:00
parent d919dbc672
commit 03190c0ea8
9 changed files with 410 additions and 8 deletions

27
.github/workflows/playwright.yml vendored Normal file
View File

@ -0,0 +1,27 @@
name: Playwright Tests
on:
push:
branches: [ main, master ]
pull_request:
branches: [ main, master ]
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: npm ci
- 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
.gitignore vendored Normal file
View File

@ -0,0 +1,4 @@
node_modules/
/test-results/
/playwright-report/
/playwright/.cache/

View File

@ -1,14 +1,14 @@
# Project
# 🎭 Playwright Examples
> This repo has been populated by an initial template to help get you started. Please
> make sure to update the content to build a great experience for community-building.
This repo is used to demonstrate various testing scenarios with [Playwright](https://playwright.dev/) 🎭, using the official test-runner and scripts authored in TypeScript.
As the maintainer of this project, please make a few updates:
## Run Playwright example tests
- Improving this README.MD file to provide a great experience
- Updating SUPPORT.MD with content about this project's support experience
- Understanding the security reporting process in SECURITY.MD
- Remove this section from the README
Use the VS Code Extension to run the tests in the tests folder or run the following command in the terminal:
```bash
npx playwright test --ui
```
## Contributing

View File

@ -0,0 +1,70 @@
[
{
"name": "Strawberry",
"id": 3
},
{
"name": "Banana",
"id": 1
},
{
"name": "Tomato",
"id": 5
},
{
"name": "Pear",
"id": 4
},
{
"name": "Blackberry",
"id": 64
},
{
"name": "Kiwi",
"id": 66
},
{
"name": "Pineapple",
"id": 10
},
{
"name": "Passionfruit",
"id": 70
},
{
"name": "Orange",
"id": 2
},
{
"name": "Raspberry",
"id": 23
},
{
"name": "Watermelon",
"id": 25
},
{
"name": "Lemon",
"id": 26
},
{
"name": "Mango",
"id": 27
},
{
"name": "Blueberry",
"id": 33
},
{
"name": "Apple",
"id": 6
},
{
"name": "Melon",
"id": 41
},
{
"name": "Lime",
"id": 44
}
]

49
hars/fruit.har Normal file
View File

@ -0,0 +1,49 @@
{
"log": {
"version": "1.2",
"creator": {
"name": "Playwright",
"version": "1.35.1"
},
"browser": {
"name": "chromium",
"version": "115.0.5790.24"
},
"entries": [
{
"startedDateTime": "2023-06-29T16:45:06.982Z",
"time": -1,
"request": {
"method": "GET",
"url": "https://demo.playwright.dev/api-mocking/api/v1/fruits",
"httpVersion": "HTTP/1.1",
"cookies": [],
"headers": [
{ "name": "Accept-Language", "value": "en-US" },
{ "name": "Referer", "value": "https://demo.playwright.dev/api-mocking/" },
{ "name": "User-Agent", "value": "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/115.0.5790.24 Safari/537.36" }
],
"queryString": [],
"headersSize": -1,
"bodySize": -1
},
"response": {
"status": -1,
"statusText": "",
"httpVersion": "HTTP/1.1",
"cookies": [],
"headers": [],
"content": {
"size": -1,
"mimeType": "x-unknown"
},
"headersSize": -1,
"bodySize": -1,
"redirectURL": ""
},
"cache": {},
"timings": { "send": -1, "wait": -1, "receive": -1 }
}
]
}
}

88
package-lock.json generated Normal file
View File

@ -0,0 +1,88 @@
{
"name": "playwright-examples",
"version": "1.0.0",
"lockfileVersion": 3,
"requires": true,
"packages": {
"": {
"name": "playwright-examples",
"version": "1.0.0",
"license": "ISC",
"dependencies": {
"@axe-core/playwright": "^4.7.3"
},
"devDependencies": {
"@playwright/test": "^1.35.1"
}
},
"node_modules/@axe-core/playwright": {
"version": "4.7.3",
"resolved": "https://registry.npmjs.org/@axe-core/playwright/-/playwright-4.7.3.tgz",
"integrity": "sha512-v2PRgAyGvop7bamrTpNJtc5b1R7giAPnMzZXrS/VDZBCY5+uwVYtCNgDvBsqp5P1QMZxUMoBN+CERJUTMjFN0A==",
"dependencies": {
"axe-core": "^4.7.0"
},
"peerDependencies": {
"playwright-core": ">= 1.0.0"
}
},
"node_modules/@playwright/test": {
"version": "1.35.1",
"resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.35.1.tgz",
"integrity": "sha512-b5YoFe6J9exsMYg0pQAobNDR85T1nLumUYgUTtKm4d21iX2L7WqKq9dW8NGJ+2vX0etZd+Y7UeuqsxDXm9+5ZA==",
"dev": true,
"dependencies": {
"@types/node": "*",
"playwright-core": "1.35.1"
},
"bin": {
"playwright": "cli.js"
},
"engines": {
"node": ">=16"
},
"optionalDependencies": {
"fsevents": "2.3.2"
}
},
"node_modules/@types/node": {
"version": "20.3.2",
"resolved": "https://registry.npmjs.org/@types/node/-/node-20.3.2.tgz",
"integrity": "sha512-vOBLVQeCQfIcF/2Y7eKFTqrMnizK5lRNQ7ykML/5RuwVXVWxYkgwS7xbt4B6fKCUPgbSL5FSsjHQpaGQP/dQmw==",
"dev": true
},
"node_modules/axe-core": {
"version": "4.7.2",
"resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.7.2.tgz",
"integrity": "sha512-zIURGIS1E1Q4pcrMjp+nnEh+16G56eG/MUllJH8yEvw7asDo7Ac9uhC9KIH5jzpITueEZolfYglnCGIuSBz39g==",
"engines": {
"node": ">=4"
}
},
"node_modules/fsevents": {
"version": "2.3.2",
"resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
"integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
"dev": true,
"hasInstallScript": true,
"optional": true,
"os": [
"darwin"
],
"engines": {
"node": "^8.16.0 || ^10.6.0 || >=11.0.0"
}
},
"node_modules/playwright-core": {
"version": "1.35.1",
"resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.35.1.tgz",
"integrity": "sha512-pNXb6CQ7OqmGDRspEjlxE49w+4YtR6a3X6mT1hZXeJHWmsEz7SunmvZeiG/+y1yyMZdHnnn73WKYdtV1er0Xyg==",
"bin": {
"playwright-core": "cli.js"
},
"engines": {
"node": ">=16"
}
}
}
}

16
package.json Normal file
View File

@ -0,0 +1,16 @@
{
"name": "playwright-examples",
"version": "1.0.0",
"description": "This repo is used to demonstrate various testing scenarios with [Playwright](https://playwright.dev/) 🎭, using the official test-runner and scripts authored in TypeScript.",
"main": "index.js",
"scripts": {},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"@playwright/test": "^1.35.1"
},
"dependencies": {
"@axe-core/playwright": "^4.7.3"
}
}

77
playwright.config.ts Normal file
View File

@ -0,0 +1,77 @@
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: './tests',
/* 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://127.0.0.1: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: 'chromium',
use: { ...devices['Desktop Chrome'] },
},
{
name: 'firefox',
use: { ...devices['Desktop Firefox'] },
},
{
name: 'webkit',
use: { ...devices['Desktop Safari'] },
},
/* 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 */
// webServer: {
// command: 'npm run start',
// url: 'http://127.0.0.1:3000',
// reuseExistingServer: !process.env.CI,
// },
});

71
tests/api-mocking.spec.ts Normal file
View File

@ -0,0 +1,71 @@
import { test, expect, type Page } from '@playwright/test';
test.describe('Mocking an API call', () => {
test("mocks a fruit and doesn't call api", async ({ page }) => {
// Mock the api call before navigating
await page.route('*/**/api/v1/fruits', async (route) => {
const json = [{ name: 'Strawberry', id: 21 }];
await route.fulfill({ json });
});
// Go to the page
await page.goto('https://demo.playwright.dev/api-mocking');
// Assert that the Strawberry fruit is visible
await expect(page.getByText('Strawberry')).toBeVisible();
});
});
test.describe('Intercepting the request and modifying it', () => {
test('gets the json from api and adds a new fruit', async ({ page }) => {
// Get the response and add to it
await page.route('*/**/api/v1/fruits', async (route) => {
const response = await route.fetch();
const json = await response.json();
json.push({ name: 'Playwright', id: 100 });
// Fulfill using the original response, while patching the response body
// with the given JSON object.
await route.fulfill({ response, json });
});
// Go to the page
await page.goto('https://demo.playwright.dev/api-mocking');
// Assert that the new fruit is visible
await expect(page.getByText('Playwright', { exact: true })).toBeVisible();
});
});
test.describe('Mocking with HAR files', () => {
test('records or updates the HAR file', async ({ page }) => {
// Get the response from the HAR file
await page.routeFromHAR('./hars/fruit.har', {
url: '*/**/api/v1/fruits',
update: true,
});
// Go to the page
await page.goto('https://demo.playwright.dev/api-mocking');
});
test('gets the json from HAR and checks the new fruit has been added', async ({ page }) => {
// Replay API requests from HAR.
// Either use a matching response from the HAR,
// or abort the request if nothing matches.
await page.routeFromHAR('./hars/fruit.har', {
url: '*/**/api/v1/fruits',
update: false,
});
// Go to the page
await page.goto('https://demo.playwright.dev/api-mocking');
// Assert that the Playwright fruit is visible
await expect(page.getByText('Strawberry')).toBeVisible();
});
});