Udemy Playwright: Web Automation Testing From Zero to Hero: Difference between revisions
Jump to navigation
Jump to search
Udemy Playwright: Web Automation Testing From Zero to Hero (view source)
Revision as of 21:36, 12 June 2024
, 12 Juneno edit summary
m (→Test Tags) |
mNo edit summary |
||
| (6 intermediate revisions by the same user not shown) | |||
| Line 1: | Line 1: | ||
* | <span id="BackToTop"></span> | ||
<div class="noprint" style="background-color:#FAFAFA; position:fixed; bottom:2%; left:0.25%; padding:0; margin:0;"> | |||
[[#BackToTop|Back to the Top]] | |||
</div> | |||
* Udemy: [https://www.udemy.com/course/playwright-from-zero-to-hero Udemy Playwright: Web Automation Testing From Zero to Hero] | |||
* | * My GitHub Playwright Udemy Course [https://github.com/VincentDirks/Playwright-Udemy-Course my repo #1] & [https://github.com/VincentDirks/Playwright-Udemy-Course-2 my repo #2] | ||
Note: This page is now massive, but it's handy to have it all in one place so that I can use ctrl-f to find notes... I'll be using this page as my cheatsheet for Playwright | |||
== Section 1: Preparation == | == Section 1: Preparation == | ||
| Line 1,949: | Line 1,955: | ||
=== Mobile Device Emulator === | === Mobile Device Emulator === | ||
=== | 1. Create new file <code>tests/testMobile.spec.ts</code> | ||
<nowiki> | |||
import { test } from "@playwright/test" | |||
test("input fields", async ({ page }, testInfo) => { | |||
await page.goto("/") | |||
const isMobile = testInfo.project.name === 'mobile' | |||
isMobile && await page.locator('.sidebar-toggle').click() // to show the sidebar which is hidden for mobile devices | |||
await page.getByText("Forms").click() | |||
await page.getByText("Form Layouts").click() | |||
isMobile && await page.locator('.sidebar-toggle').click() | |||
const usingTheGridEmailInput = page | |||
.locator("nb-card", { hasText: "Using the Grid" }) | |||
.getByRole("textbox", { name: "Email" }) | |||
await usingTheGridEmailInput.fill("test@test.com") | |||
await usingTheGridEmailInput.clear() | |||
await usingTheGridEmailInput.fill("test2@test.com") | |||
})</nowiki> | |||
2. Update <code>playwright.config.ts</code> | |||
<nowiki> | |||
export default defineConfig<TestOptions>({ | |||
... | |||
projects: [ | |||
... | |||
{ | |||
name: "mobile", | |||
testMatch: "testMobile.spec.ts", | |||
use: { | |||
...devices["iPhone 13 Pro"], | |||
// ..OR.. | |||
// viewport: { width: 414, height: 800 }, | |||
}, | |||
}, | |||
], | |||
})</nowiki> | |||
=== Reporters === | |||
Configure reporters in <code>playwright.config.ts</code> as per | |||
<nowiki> | |||
... | |||
export default defineConfig<TestOptions>({ | |||
... | |||
reporter: [ | |||
["json", { outputFile: "test-results/jsonReport.json" }], | |||
["junit", { outputFile: "test-results/junitReport.xml" }], | |||
['allure-playwright'] | |||
], | |||
...</nowiki> | |||
==== Allure ==== | |||
Setup for windows | |||
* [https://www.java.com/en/download/ java download] (FYI: I did not need to set JAVA_HOME) | |||
* [https://scoop.sh/ Scoop] | |||
<nowiki> | |||
Set-ExecutionPolicy -ExecutionPolicy RemoteSigned -Scope CurrentUser | |||
Invoke-RestMethod -Uri https://get.scoop.sh | Invoke-Expression</nowiki> | |||
* [https://allurereport.org/docs/install-for-windows/ Allure report install for windows] | |||
<nowiki>scoop install allure</nowiki> | |||
* [https://www.npmjs.com/package/allure-playwright/v/2.15.1 npm:allure-playwright] | |||
<nowiki> | |||
npm i -D @playwright/test allure-playwright --force</nowiki> | |||
Now you can run some tests followed by | |||
<nowiki> | |||
allure generate allure-results -o allure-report --clean | |||
allure open allure-report</nowiki> | |||
Don't forget to add <code>allure-results</code> and <code>allure-report</code> to <code>.gitignore</code> | |||
Allure looks cool but also looks like a bit of a learning curve ... | |||
PS. it seems pretty straight forward to create your own custom reporter as per these instructions [https://playwright.dev/docs/api/class-reporter Playwright class reporter] | |||
=== Visual Testing === | === Visual Testing === | ||
This is so cool! Simply call <code>await expect(locator).toHaveScreenshot(...)</code> on an element. The first run through creates screenshot(s) inside a subfolder from <code>tests</code> folder. Second run compares current actual with previously expected. If there's any significant differences they are saved to subfolders in the <code>test-results</code> folder, and the html reporter has a very nice way to see and compare snapshots. | |||
You can control settings in the code | |||
<nowiki> | |||
await expect(locator).toHaveScreenshot({maxDiffPixels:150, maxDiffPixelRatio: 0.01})</nowiki> | |||
as well as in file <code>playwright.config.ts</code> | |||
<nowiki> | |||
export default defineConfig<TestOptions>({ | |||
expect: { | |||
... | |||
toMatchSnapshot: { maxDiffPixels: 50 }, | |||
}, | |||
...</nowiki> | |||
If you need to update a lot of snapshots use | |||
<nowiki> | |||
npx playwright test --update-snapshots</nowiki> | |||
=== Playwright with Docker Container === | === Playwright with Docker Container === | ||
=== Github Actions and Argos CI === | === Github Actions and Argos CI === | ||