![test("test something specific about my application", async ({ page, myFixture }) => {
await myFixture.createNewFile("test file");
await myFixture.getByFileName("test file").click();
expect(await myFixture.apiClient.files({ query: { open: true } }))
.toEqual(["test file"]);
});
14
https://playwright.dev/docs/test-fixtures
Add Fixtures](https://image.slidesharecdn.com/jonathanfrere-playwright-240607112052-492f76be/85/Dev-Day-2024-Jonathan-Frere-Playwright-Das-Beste-aus-dem-Dramatiker-herausholen-14-320.jpg)
![test("test something specific about my application", async ({ page, myFixture }) => {
await myFixture.createNewFile("test file");
await myFixture.getByFileName("test file").click();
expect(await myFixture.apiClient.files({ query: { open: true } }))
.toEqual(["test file"]);
});
import { test as _baseTest } from "@playwright/test";
export const test = _baseTest.extend({
myFixture: async ({ page }, use) => {
// run pre-test async setup code here
// e.g. page.goto(...)
const apiClient = new ApiClient(page.url());
await use({
apiClient,
getByFileName(name: string) { /* ... */ },
async createNewFile() { /* ... */ },
})
}
})
15
https://playwright.dev/docs/test-fixtures
Add Fixtures
App-specific locators
Direct (typed) access to API
Common/shared routines](https://image.slidesharecdn.com/jonathanfrere-playwright-240607112052-492f76be/85/Dev-Day-2024-Jonathan-Frere-Playwright-Das-Beste-aus-dem-Dramatiker-herausholen-15-320.jpg)
Dev Day 2024: Jonathan Frere - Playwright: Das Beste aus dem Dramatiker herausholen
- 1. Jonathan Frere [email protected] @[email protected] Das Beste aus dem Dramatiker herausholen 1
- 2. 2 https://playwright.dev/docs/writing-tests import { test, expect } from "@playwright/test"; test("has title", async ({ page }) => { await page.goto("https://playwright.dev/"); await expect(page).toHaveTitle(/Playwright/); }); test("get started link", async ({ page }) => { await page.goto("https://playwright.dev/"); await page.getByRole("link", { name: "Get started" }).click(); await expect( page.getByRole("heading", { name: "Installation" }), ).toBeVisible(); });
- 3. 3 Testing Goals Accuracy Speed “How often will this test fail without me changing anything? “If I change my code and the test fails, is it likely that there’s a bug in my code?” “How quickly can I run this test?” “How quickly can I write this test?” “If this code doesn’t work, will the test still succeed?”
- 4. 4 https://playwright.dev/docs/locators Use Locators page.getByLabel("Folder Name"); page.getByRole("button", { name: "New Folder" }); page.getByRole("listitem").filter({ hasText: "T-Shirt" }); page .getByRole("listitem") .filter({ hasText: "Trousers" }) .getByRole("button", { name: "Delete" });
- 5. 5 https://testing-library.com/docs/queries/about https://playwright.dev/docs/actionability Use Locators // define some locators const newFolderButtonLocator = page.getByRole("button", { name: "New Folder" }); const folderNameInputLocator = page.getByLabel("Folder Name"); // load the page await page.goto("/page"); // find the button and click it await newFolderButtonLocator.click(); // check that the focus has been set correctly await expect(folderNameInputLocator).toBeFocused();
- 6. // define some locators const newFolderButtonLocator = page.getByRole("button", { name: "New Folder" }); const folderNameInputLocator = page.getByLabel("Folder Name"); // load the page await page.goto("/page"); // find the button and click it await newFolderButtonLocator.click(); // check that the focus has been set correctly await expect(folderNameInputLocator).toBeFocused(); 6 https://testing-library.com/docs/queries/about https://playwright.dev/docs/actionability Use Locators Automatic Retries User-Facing Selectors
- 8. 8 Be Direct test("creating a folder with the same name as a file is not allowed", async () => { // set up our system ready to be tested const fs = await createFileSystem(); await fs.createFolder("/hello/"); await fs.createFile("/hello/world", "Hello, World"); // perform an action const result = await fs.createFolder("/hello/world/"); // check that we get the result we expect expect(result).toBeInstanceOf(Error); });
- 9. 9 Be Direct test("creating a folder with the same name as a file is not allowed", async ({page}) => { // set up our system ready to be tested await page.goto("/"); await page.getByRole("button", { name: /new folder/i }).click(); await page.getByLabel("Folder name").type("hello"); await page.getByRole("button", { name: /create/i }).click(); await page.getByRole("link", { name: /hello/i }).click(); await page.getByRole("button", { name: /new file/i }).click(); await page.getByLabel("File name”).type("world"); await page.getByLabel("File contents").type("Hello, World!"); await page.getByRole("button", { name: /create/i }).click(); // perform an action await page.getByRole("button", { name: /new folder/i }).click(); await page.getByLabel("Folder name").type("world"); await page.getByRole("button", { name: /create/i }).click(); // check that we get the result we expect await expect(page.getByText("A folder with the name 'world' already exists")).toBeVisible(); });
- 10. 10 Be Direct test("creating a folder with the same name as a file is not allowed", async ({page}) => { // set up our system ready to be tested await page.goto("/"); await page.getByRole("button", { name: /new folder/i }).click(); await page.getByLabel("Folder name").type("hello"); await page.getByRole("button", { name: /create/i }).click(); await page.getByRole("link", { name: /hello/i }).click(); await page.getByRole("button", { name: /new file/i }).click(); await page.getByLabel("File name”).type("world"); await page.getByLabel("File contents").type("Hello, World!"); await page.getByRole("button", { name: /create/i }).click(); // perform an action await page.getByRole("button", { name: /new folder/i }).click(); await page.getByLabel("Folder name").type("world"); await page.getByRole("button", { name: /create/i }).click(); // check that we get the result we expect await expect(page.getByText("A folder with the name 'world' already exists")).toBeVisible(); }); Slow - waiting for browser interaction Opaque - multiple lines to do one thin Brittle - multiple layers to go through
- 11. test("creating a folder with the same name as a file is not allowed", async ({page}) => { // set up our system ready to be tested await post("/api/hello", { type: "folder" }); await post(“/api/hello/world", "Hello, World!") await page.goto("/hello"); // perform an action await page.getByRole("button", { name: /new folder/i }).click(); await page.getByLabel("Folder name").type("world"); await page.getByRole("button", { name: /create/i }).click(); // check that we get the result we expect await expect(page.getByText("A folder with the name 'world' already exists")).toBeVisible(); }); 11 Be Direct
- 12. test("creating a folder with the same name as a file is not allowed", async ({page}) => { // set up our system ready to be tested await post("/api/hello", { type: "folder" }); await post(“/api/hello/world", "Hello, World!") await page.goto("/hello"); // perform an action await page.getByRole("button", { name: /new folder/i }).click(); await page.getByLabel("Folder name").type("world"); await page.getByRole("button", { name: /create/i }).click(); // check that we get the result we expect await expect(page.getByText("A folder with the name 'world' already exists")).toBeVisible(); }); 12 Be Direct Quicker - directly interacts w/ API (or in-browser store, et Clearer - declares what I want to achieve Solid - fewer layers where something can go wrong
- 14. test("test something specific about my application", async ({ page, myFixture }) => { await myFixture.createNewFile("test file"); await myFixture.getByFileName("test file").click(); expect(await myFixture.apiClient.files({ query: { open: true } })) .toEqual(["test file"]); }); 14 https://playwright.dev/docs/test-fixtures Add Fixtures
- 15. test("test something specific about my application", async ({ page, myFixture }) => { await myFixture.createNewFile("test file"); await myFixture.getByFileName("test file").click(); expect(await myFixture.apiClient.files({ query: { open: true } })) .toEqual(["test file"]); }); import { test as _baseTest } from "@playwright/test"; export const test = _baseTest.extend({ myFixture: async ({ page }, use) => { // run pre-test async setup code here // e.g. page.goto(...) const apiClient = new ApiClient(page.url()); await use({ apiClient, getByFileName(name: string) { /* ... */ }, async createNewFile() { /* ... */ }, }) } }) 15 https://playwright.dev/docs/test-fixtures Add Fixtures App-specific locators Direct (typed) access to API Common/shared routines
- 17. 17 Delete Tests This slide intentionally left blank
- 19. [email protected] esveo.com/jof @[email protected] Jonathan Frere 19 1. Use locators • Reduces flakiness, speeds up tests, improves accessibility 2. Be Direct • Not everything in an end-to-end test needs to be end-to-end! • Get the system into the ready-to-test state ASAP 3. Add Fixtures • Project-specific methods, selectors, etc make it easier to share code and write clear tests 4. Delete Your Tests • Write tests where they can do the most impact