Testing Web Applications with Playwright

A presentation at dotNET Madrid in June 2022 in Madrid, Spain by Debbie O'Brien

Slide 1

Slide 1

Testing web applications with Playwright It’s time to play your tests wright

Slide 2

Slide 2

Debbie O’Brien Senior Program Manager at Microsoft Playwright Advocate International Speaker Teacher YouTuber Open Source Contributor Love Sport: running, cycling, skiing, padel, 4th degree black belt in Taekwondo debs_obrien

Slide 3

Slide 3

Testing is hard takes time to learn takes time to build time === money culture debs_obrien

Slide 4

Slide 4

How can we get more developers to write tests? debs_obrien

Slide 5

Slide 5

Playwright Testing Reliable end-to-end testing for modern web apps Any browser • Any platform • One API Full isolation • Fast execution Powerful Tooling debs_obrien

Slide 6

Slide 6

Getting Started debs_obrien

Slide 7

Slide 7

After Install Install NUnit + Microsoft.Playwright.NUnit Create a test file Run the test debs_obrien

Slide 8

Slide 8

Codegen Generate tests by recording your actions debs_obrien

Slide 9

Slide 9

Codegen debs_obrien

Slide 10

Slide 10

Slide 11

Slide 11

Multiple Languages Java JavaScript TypeScript Python C# debs_obrien

Slide 12

Slide 12

Slide 13

Slide 13

Slide 14

Slide 14

Slide 15

Slide 15

Locators a way to find element(s) on the page at any moment with built in auto-waiting and retry-ability debs_obrien

Slide 16

Slide 16

Web First Assertions Created with the page.locator(selector[, options]) method strict by default Must be awaited Re-queries given selectors waits until it has four elements with given texts

Slide 17

Slide 17

Web First Assertions locators for everything • Expect(Locator).toBeCheckedAsync() • Expect(Locator).toBeDisabledAsync() • Expect(Locator).toBeEditableAsync() • Expect(Locator).toBeEmptyAsync() • Expect(Locator).toBeEnabledAsync() • Expect(Locator).toBeFocusedAsync() • Expect(Locator).toBeHiddenAsync() • Expect(Locator).toBeVisibleAsync() • Expect(Locator).toContainTextAsync(text) • Expect(Locator).toHaveAttributeAsync(name) • Expect(Locator).toHaveClassAsync(expected) • Expect(Locator).toHaveCountAsync(count) • Expect(Locator).toHaveCSSAsync(name, value) • Expect(Locator).toHaveIdAsync(id) • Expect(Locator).toHaveJSPropertyAsync(name, value) • Expect(Locator).toHaveTextAsync(expected) • Expect(Locator).toHaveTitleAsync(title) • Expect(Locator).toHaveURLAsync(url) Expect(Locator).toHaveValueAsync(value)

Slide 18

Slide 18

Locators CSS selectors

Slide 19

Slide 19

Locators + hasText Case insensitive substring match, accepts both strings and regexes

Slide 20

Slide 20

Locators Select the remove from cart button from one product

Slide 21

Slide 21

Locators + has:

Slide 22

Slide 22

Frame Locators Autowait iframes to appear

Slide 23

Slide 23

Frame Locators Autowait iframes to appear

Slide 24

Slide 24

Running Tests Run all tests, set of tests, single test Tests run in parallel Super fast…. debs_obrien

Slide 25

Slide 25

Running Tests debs_obrien

Slide 26

Slide 26

Running Tests in headed mode debs_obrien

Slide 27

Slide 27

Running debug mode debs_obrien

Slide 28

Slide 28

Slide 29

Slide 29

Trace Files Record a trace for each test

Slide 30

Slide 30

trace.playwright.dev

Slide 31

Slide 31

Slide 32

Slide 32

Slide 33

Slide 33

DOM Snapshot You can interact with the DOM, inspect etc. debs_obrien

Slide 34

Slide 34

Slide 35

Slide 35

Playwright Testing Codegen: Auto Generate Tests Run Debug mode Locators and Frame Locators Show TraceFiles debs_obrien

Slide 36

Slide 36

Playwright Testing Auto wait built in for all actions: • no need for set timeout calls Tests run in parallel: • super fast • multiple browsers and devices Intercepting requests: • follows all re-directs • bypasses CORS • manages cookies debs_obrien

Slide 37

Slide 37

Are you ready to Playwright?

Slide 38

Slide 38

Thank You Docs: playwright.dev aka.ms/playwright/youtube aka.ms/playwright/twitter aka.ms/playwright-slack debbie.codes debbieobrien@microsoft.com debs_obrien