The document introduces Playwright Test, a comprehensive, open-source framework for end-to-end testing, supporting TypeScript, parallel execution, and cross-browser functionality. It covers key concepts such as fixtures for creating isolated environments for tests, configuration options, and data-driven testing methodologies. The document includes examples of setup, usage, and various features like time-travel debugging and customizable configuration settings.

1. 🎭 Playwright Test
Playful testing framework

2. Talk Prerequisites
https:/
/nodejs.org/ Web Platform

3. What is Playwright Test?
https:/
/github.com/microsoft/playwright

4. ● New product from Playwright Team
What is Playwright Test?
https:/
/github.com/microsoft/playwright

5. ● New product from Playwright Team
● Batteries-included test framework for end-to-end testing
What is Playwright Test?
https:/
/github.com/microsoft/playwright

6. ● New product from Playwright Team
● Batteries-included test framework for end-to-end testing
○ TypeScript support out-of-the-box
What is Playwright Test?
https:/
/github.com/microsoft/playwright

7. ● New product from Playwright Team
● Batteries-included test framework for end-to-end testing
○ TypeScript support out-of-the-box
○ Parallel execution out-of-the-box
What is Playwright Test?
https:/
/github.com/microsoft/playwright

8. ● New product from Playwright Team
● Batteries-included test framework for end-to-end testing
○ TypeScript support out-of-the-box
○ Parallel execution out-of-the-box
○ Cross-browser, Snapshots, Fixtures, ...
What is Playwright Test?
https:/
/github.com/microsoft/playwright

9. ● New product from Playwright Team
● Batteries-included test framework for end-to-end testing
○ TypeScript support out-of-the-box
○ Parallel execution out-of-the-box
○ Cross-browser, Snapshots, Fixtures, …
○ Time-travel debugging 🔥
What is Playwright Test?
https:/
/github.com/microsoft/playwright

10. ● New product from Playwright Team
● Batteries-included test framework for end-to-end testing
○ TypeScript support out-of-the-box
○ Parallel execution out-of-the-box
○ Cross-browser, Snapshots, Fixtures, …
○ Time-travel debugging 🔥
● Open Source, Free
What is Playwright Test?
https:/
/github.com/microsoft/playwright

11. Agenda
1. Getting Started 🚀
2. Fixtures 🦄
3. Configuration 🛠
4. Artifacts Management 💎
5. Playwright Tracing 󰨂

12. Act I
Getting Started
🚀 Getting Started
🦄 Fixtures
🛠 Configuration
💎 Artifacts
󰨂 Tracing

13. 🍿 Demo: Getting Started 🍿

14. Installation

15. // test.spec.ts
import { test, expect } from '@playwright/test';
test('test', async ({ page }) => {
await page.goto('https://playwright.dev/');
await page.click('a:visible:has-text("Docs")');
expect(page.url()).toBe('https://playwright.dev/docs/intro');
});
T
y
p
e
S
c
r
i
p
t

16. Running Test

17. # .github/workflows/tests.yml
on: [push]
jobs:
run_tests:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v2
- uses: actions/setup-node@v2
- run: npm ci
- run: npx playwright install-deps
- run: npx playwright install
- run: npx playwright test
G
i
t
h
u
b
A
c
t
i
o
n
s

20. 💎 Artifacts
Act II
Fixtures
🚀 Getting Started
🦄 Fixtures
🛠 Configuration
󰨂 Tracing
🎁 Treats

21. // test.spec.ts
import { test, expect } from '@playwright/test';
test('test', async ({ page }) => {
await page.goto('https://playwright.dev/');
await page.click('a:visible:has-text("Docs")');
expect(page.url()).toBe('https://playwright.dev/docs/intro');
});
T
y
p
e
S
c
r
i
p
t

22. // test.spec.ts
import { test, expect } from '@playwright/test';
test('test', async ({ page }) => {
await page.goto('https://playwright.dev/');
await page.click('a:visible:has-text("Docs")');
expect(page.url()).toBe('https://playwright.dev/docs/intro');
});
T
y
p
e
S
c
r
i
p
t

23. // test.spec.ts
import { test, expect } from '@playwright/test';
test('test', async ({ page }) => {
await page.goto('https://playwright.dev/');
await page.click('a:visible:has-text("Docs")');
expect(page.url()).toBe('https://playwright.dev/docs/intro');
});
T
y
p
e
S
c
r
i
p
t
“Fixture”

24. // test.spec.ts
import { test, expect } from '@playwright/test';
test('test', async ({ page }) => {
await page.goto('https://playwright.dev/');
await page.click('a:visible:has-text("Docs")');
expect(page.url()).toBe('https://playwright.dev/docs/intro');
});
T
y
p
e
S
c
r
i
p
t
1. Fully isolated Playwright page
“Fixture”

25. // test.spec.ts
import { test, expect } from '@playwright/test';
test('test', async ({ page, context }) => {
await page.goto('https://playwright.dev/');
await page.click('a:visible:has-text("Docs")');
expect(page.url()).toBe('https://playwright.dev/docs/intro');
});
T
y
p
e
S
c
r
i
p
t
2. Fully isolated Playwright context for multi-page tests
“Fixture”

26. // test.spec.ts
import { test, expect } from '@playwright/test';
test('test', async ({ page, context, browserName }) => {
await page.goto('https://playwright.dev/');
await page.click('a:visible:has-text("Docs")');
expect(page.url()).toBe('https://playwright.dev/docs/intro');
});
T
y
p
e
S
c
r
i
p
t
3. Browser name: ‘chromium’, ‘firefox’ or ‘webkit’
“Fixture”

27. // test.spec.ts
import { test, expect } from '@playwright/test';
test('test', async ({ page, context, browserName, isMobile }) => {
await page.goto('https://playwright.dev/');
await page.click('a:visible:has-text("Docs")');
expect(page.url()).toBe('https://playwright.dev/docs/intro');
});
T
y
p
e
S
c
r
i
p
t
4. “true” when running in mobile browser
“Fixture”

28. // test.spec.ts
import { test, expect } from '@playwright/test';
test('test', async ({ page, context, browserName, isMobile }) => {
await page.goto('https://playwright.dev/');
await page.click('a:visible:has-text("Docs")');
expect(page.url()).toBe('https://playwright.dev/docs/intro');
});
T
y
p
e
S
c
r
i
p
t
4. “true” when running in mobile browser
“Fixture”
5. channel
6. timezoneId
7. locale
8. ...

29. Concept: “Fixtures” 🦄
● Borrowed from PyTest
● Isolated configurable environment for each test
● Playwright Test comes with many ready-to-use fixtures
● Create your own fixtures instead of “beforeEach” / “afterEach” hooks
○ Organize tests semantically, not by environment
○ Fixtures are only initialized when required by test
○ Fixtures are ~20% less code
● Read more: https:/
/playwright.dev/docs/test-fixtures

30. 💎 Artifacts
Act III
Configuration
🚀 Getting Started
🦄 Fixtures
🔧 Configuration
󰨂 Tracing

31. Configuration
1. Global configuration via configuration file
2. Granular configuration via test.use()
3. Data-driven configuration

32. Configuration File
● JavaScript: playwright.config.js
● TypeScript: playwright.config.ts

33. Configuration File
● JavaScript: playwright.config.js
● TypeScript: playwright.config.ts

34. // playwright.config.ts
import { PlaywrightTestConfig } from '@playwright/test';
const config : PlaywrightTestConfig = {
};
export default config;
T
y
p
e
S
c
r
i
p
t

35. // playwright.config.ts
import { PlaywrightTestConfig } from '@playwright/test';
const config : PlaywrightTestConfig = {
};
export default config;
T
y
p
e
S
c
r
i
p
t

36. // playwright.config.ts
import { PlaywrightTestConfig } from '@playwright/test';
const config : PlaywrightTestConfig = {
};
export default config;
T
y
p
e
S
c
r
i
p
t

37. // playwright.config.ts
import { PlaywrightTestConfig } from '@playwright/test';
const config : PlaywrightTestConfig = {
};
export default config;
T
y
p
e
S
c
r
i
p
t

38. // playwright.config.ts
import { PlaywrightTestConfig } from '@playwright/test';
const config : PlaywrightTestConfig = {
// 1. Runner configuration
reporter: 'list',
};
export default config;
● globalSetup
● globalTeardown
● ...
T
y
p
e
S
c
r
i
p
t

39. // playwright.config.ts
import { PlaywrightTestConfig } from '@playwright/test';
const config : PlaywrightTestConfig = {
// 1. Runner configuration
reporter: 'list',
};
export default config;
● globalSetup
● globalTeardown
● ...
T
y
p
e
S
c
r
i
p
t
First-Party:
● dot
● list
● line
● json
● junit
Third-Party:
● experimental-allure-playwright 🔥

40. // playwright.config.ts
import { PlaywrightTestConfig } from '@playwright/test';
const config : PlaywrightTestConfig = {
// 1. Runner configuration
reporter: 'list',
};
export default config;
● globalSetup
● globalTeardown
● ...
T
y
p
e
S
c
r
i
p
t

41. // playwright.config.ts
import { PlaywrightTestConfig } from '@playwright/test';
const config : PlaywrightTestConfig = {
// 1. Runner configuration
reporter: 'list',
projects: [{
}]};
export default config;
● globalSetup
● globalTeardown
● ...
T
y
p
e
S
c
r
i
p
t

42. // playwright.config.ts
import { PlaywrightTestConfig } from '@playwright/test';
const config : PlaywrightTestConfig = {
// 1. Runner configuration
reporter: 'list',
projects: [{
// 2. Project configuration
name: 'chromium',
retries: 0,
timeout: 30000,
}]};
export default config;
● globalSetup
● globalTeardown
● ...
● outputDir
● testDir
● ...
T
y
p
e
S
c
r
i
p
t

43. // playwright.config.ts
import { PlaywrightTestConfig } from '@playwright/test';
const config : PlaywrightTestConfig = {
// 1. Runner configuration
reporter: 'list',
projects: [{
// 2. Project configuration
name: 'chromium',
retries: 0,
timeout: 30000,
// 3. Fixtures configuration
use: {
browserName: 'chromium',
},
}]};
export default config;
● globalSetup
● globalTeardown
● ...
● outputDir
● testDir
● ...
T
y
p
e
S
c
r
i
p
t
● browserName
● headless
● screenshot
● trace
● ...

44. // playwright.config.ts
import { PlaywrightTestConfig } from '@playwright/test';
const config : PlaywrightTestConfig = {
// 1. Runner configuration
reporter: 'list',
projects: [{
// 2. Project configuration
name: 'chromium',
retries: 0,
timeout: 30000,
// 3. Fixtures configuration
use: {
browserName: 'chromium',
},
}]};
export default config;
● globalSetup
● globalTeardown
● ...
● outputDir
● testDir
● ...
● browserName
● headless
● screenshot
● trace
● ...
T
y
p
e
S
c
r
i
p
t

45. // playwright.config.ts
import { PlaywrightTestConfig } from '@playwright/test';
const config : PlaywrightTestConfig = {
// 1. Runner configuration
reporter: 'list',
projects: [{
// 2. Project configuration
name: 'chromium',
retries: 0,
timeout: 30000,
// 3. Fixtures configuration
use: {
browserName: 'chromium',
},
}]};
export default config;
T
y
p
e
S
c
r
i
p
t
// test.spec.ts
import { test, expect } from '@playwright/test';
test('test', async ({ page }) => {
page; // chromium page
});

46. // playwright.config.ts
import { PlaywrightTestConfig } from '@playwright/test';
const config : PlaywrightTestConfig = {
// 1. Runner configuration
reporter: 'list',
projects: [{
// 2. Project configuration
name: 'chromium',
retries: 0,
timeout: 30000,
// 3. Fixtures configuration
use: {
browserName: 'chromium',
},
}]};
export default config;
T
y
p
e
S
c
r
i
p
t
// test.spec.ts
import { test, expect } from '@playwright/test';
test('test', async ({ page }) => {
page; // chromium page
});

47. // playwright.config.ts
import { PlaywrightTestConfig } from '@playwright/test';
const config : PlaywrightTestConfig = {
// 1. Runner configuration
reporter: 'list',
projects: [{
// 2. Project configuration
name: 'chromium',
retries: 0,
timeout: 30000,
// 3. Fixtures configuration
use: {
browserName: 'chromium',
},
}]};
export default config;
T
y
p
e
S
c
r
i
p
t
// test.spec.ts
import { test, expect } from '@playwright/test';
test('test', async ({ page }) => {
page; // chromium page
});

48. // playwright.config.ts
import { PlaywrightTestConfig } from '@playwright/test';
const config : PlaywrightTestConfig = {
// 1. Runner configuration
reporter: 'list',
projects: [{
// 2. Project configuration
name: 'chromium',
retries: 0,
timeout: 30000,
// 3. Fixtures configuration
use: {
browserName: 'webkit',
},
}]};
export default config;
T
y
p
e
S
c
r
i
p
t
// test.spec.ts
import { test, expect } from '@playwright/test';
test('test', async ({ page }) => {
page; // webkit page
});

49. ● javaScriptEnabled
● launchOptions
● locale
● offline
● permissions
● proxy
● screenshot
● storageState
● timezoneId
● trace
● userAgent
● video
● viewport
● acceptDownloads
● baseURL
● browserName
● bypassCSP
● channel
● colorScheme
● deviceScaleFactor
● extraHTPHeaders
● geolocation
● hasTouch
● headless
● httpCredentials
● ignoreHTTPSErrors
Fixtures Configuration

50. Granular Fixtures Configuration
● Per-file configuration
● Per-suite configuration

51. Granular Fixtures Configuration
● Per-file configuration
● Per-suite configuration

52. // france.spec.ts
import { test, expect } from '@playwright/test';
T
y
p
e
S
c
r
i
p
t

53. // france.spec.ts
import { test, expect } from '@playwright/test';
// per-file configuration
test.use({ locale: 'fr-FR', timezoneId: 'Europe/Paris' });
T
y
p
e
S
c
r
i
p
t

54. // france.spec.ts
import { test, expect } from '@playwright/test';
// per-file configuration
test.use({ locale: 'fr-FR', timezoneId: 'Europe/Paris' });
test('should work', async ({ page }) => { /* ... test goes here ... */ });
test('should use euro', async ({ page }) => { /* ... */ });
T
y
p
e
S
c
r
i
p
t

55. // france.spec.ts
import { test, expect } from '@playwright/test';
// per-file configuration
test.use({ locale: 'fr-FR', timezoneId: 'Europe/Paris' });
test('should work', async ({ page }) => { /* ... test goes here ... */ });
test('should use euro', async ({ page }) => { /* ... */ });
test.describe('light theme', () => {
});
T
y
p
e
S
c
r
i
p
t

56. // france.spec.ts
import { test, expect } from '@playwright/test';
// per-file configuration
test.use({ locale: 'fr-FR', timezoneId: 'Europe/Paris' });
test('should work', async ({ page }) => { /* ... test goes here ... */ });
test('should use euro', async ({ page }) => { /* ... */ });
test.describe('light theme', () => {
test.use({ colorScheme: 'light' }); // per-suite configuration
});
T
y
p
e
S
c
r
i
p
t

57. // france.spec.ts
import { test, expect } from '@playwright/test';
// per-file configuration
test.use({ locale: 'fr-FR', timezoneId: 'Europe/Paris' });
test('should work', async ({ page }) => { /* ... test goes here ... */ });
test('should use euro', async ({ page }) => { /* ... */ });
test.describe('light theme', () => {
test.use({ colorScheme: 'light' }); // per-suite configuration
test('should be light', async ({ page }) => { /* ... */ });
});
T
y
p
e
S
c
r
i
p
t

58. // france.spec.ts
import { test, expect } from '@playwright/test';
// per-file configuration
test.use({ locale: 'fr-FR', timezoneId: 'Europe/Paris' });
test('should work', async ({ page }) => { /* ... test goes here ... */ });
test('should use euro', async ({ page }) => { /* ... */ });
test.describe('light theme', () => {
test.use({ colorScheme: 'light' }); // per-suite configuration
test('should be light', async ({ page }) => { /* ... */ });
});
test.describe('dark theme', () => {
test.use({ colorScheme: 'dark' }); // per-suite configuration
test('should be dark', async ({ page }) => { /* ... */ });
});
T
y
p
e
S
c
r
i
p
t

59. Data-Driven Tests

60. Data-Driven Tests

61. Data-Driven Tests

62. // check-urls.spec.ts
import { test, expect } from '@playwright/test';
T
y
p
e
S
c
r
i
p
t

63. // check-urls.spec.ts
import { test, expect } from '@playwright/test';
const urls = require('./urls.json');
T
y
p
e
S
c
r
i
p
t

64. // check-urls.spec.ts
import { test, expect } from '@playwright/test';
const urls = require('./urls.json');
for (const url of urls) {
}
T
y
p
e
S
c
r
i
p
t

65. // check-urls.spec.ts
import { test, expect } from '@playwright/test';
const urls = require('./urls.json');
for (const url of urls) {
test(`check ${url}`, async ({ page }) => {
await page.goto(url);
});
}
T
y
p
e
S
c
r
i
p
t

66. // check-urls.spec.ts
import { test, expect } from '@playwright/test';
const urls = require('./urls.json');
for (const url of urls) {
test(`check ${url}`, async ({ page }) => {
await page.goto(url);
});
}
T
y
p
e
S
c
r
i
p
t
NOTE: Make sure to have
different test titles

67. 🍿 Demo: iPhone 🍿

68. // playwright.config.ts
import { PlaywrightTestConfig, devices } from '@playwright/test';
const config : PlaywrightTestConfig = {
projects: [
{
name: 'Desktop Chromium',
use: { browserName: 'chromium', },
},
{
name: 'iphone',
use: { ...devices['iPhone 12 Pro'], },
},
]
};
export default config;
T
y
p
e
S
c
r
i
p
t

69. // playwright.config.ts
import { PlaywrightTestConfig, devices } from '@playwright/test';
const config : PlaywrightTestConfig = {
projects: [
{
name: 'Desktop Chromium',
use: { browserName: 'chromium', },
},
{
name: 'iphone',
use: { ...devices['iPhone 12 Pro'], },
},
]
};
export default config;
1. Import Devices
T
y
p
e
S
c
r
i
p
t

70. // playwright.config.ts
import { PlaywrightTestConfig, devices } from '@playwright/test';
const config : PlaywrightTestConfig = {
projects: [
{
name: 'Desktop Chromium',
use: { browserName: 'chromium', },
},
{
name: 'iphone',
use: { ...devices['iPhone 12 Pro'], },
},
]
};
export default config;
1. Import Devices
T
y
p
e
S
c
r
i
p
t
2. Run tests on iPhone

71. // test.spec.ts
import { test, expect } from '@playwright/test';
test('should work', async ({ page, isMobile }) => {
await page.goto('https://playwright.dev');
if (isMobile)
await page.click('[aria-label="Navigation bar toggle"]');
await page.click('a:visible:has-text("Docs")');
expect(page.url()).toBe('https://playwright.dev/docs/intro');
});
T
y
p
e
S
c
r
i
p
t

72. Launching Playwright Inspector

73. Playwright Inspector

74. Act IV
Artifacts Management
🚀 Getting Started
🦄 Fixtures
🛠 Configuration
💎 Artifacts
󰨂 Tracing

75. Playwright Test Artifacts 💎
Test Artifacts – any by-product of test running that helps debug test failures.
All artifacts are stored by default in test-results folder.

76. Playwright Test Artifacts 💎
Test Artifacts – any by-product of test running that helps debug test failures.
All artifacts are stored by default in test-results folder.
1. screenshots

77. Playwright Test Artifacts 💎
Test Artifacts – any by-product of test running that helps debug test failures.
All artifacts are stored by default in test-results folder.
1. screenshots 2. videos

78. Playwright Test Artifacts 💎
Test Artifacts – any by-product of test running that helps debug test failures.
All artifacts are stored by default in test-results folder.
1. screenshots
��♂
3. traces
2. videos
D
i
s
c
u
s
s
e
d
l
a
t
e
r
t
o
d
a
y
!

79. // playwright.config.ts
import { PlaywrightTestConfig } from '@playwright/test';
const config : PlaywrightTestConfig = {
retries: 2,
use: {
screenshot: 'only-on-failure',
video: 'off',
trace: 'on-first-retry',
},
projects: [{
name: 'Desktop Chromium',
use: { browserName: 'chromium', },
},
]};
export default config;
T
y
p
e
S
c
r
i
p
t

80. // playwright.config.ts
import { PlaywrightTestConfig } from '@playwright/test';
const config : PlaywrightTestConfig = {
retries: 2,
use: {
screenshot: 'only-on-failure',
video: 'off',
trace: 'on-first-retry',
},
projects: [{
name: 'Desktop Chromium',
use: { browserName: 'chromium', },
},
]};
export default config;
T
y
p
e
S
c
r
i
p
t

81. // playwright.config.ts
import { PlaywrightTestConfig } from '@playwright/test';
const config : PlaywrightTestConfig = {
retries: 2,
use: {
screenshot: 'only-on-failure',
video: 'off',
trace: 'on-first-retry',
},
projects: [{
name: 'Desktop Chromium',
use: { browserName: 'chromium', },
},
]};
export default config;
T
y
p
e
S
c
r
i
p
t

82. // playwright.config.ts
import { PlaywrightTestConfig } from '@playwright/test';
const config : PlaywrightTestConfig = {
retries: 2,
use: {
screenshot: 'only-on-failure',
video: 'off',
trace: 'on-first-retry',
},
projects: [{
name: 'Desktop Chromium',
use: { browserName: 'chromium', },
},
]};
export default config;
T
y
p
e
S
c
r
i
p
t
Recommended 👍

83. Screenshot Artifacts
● “on” – always record screenshot after the test is finished
● “off” – never record screenshot after the test is finished
● “only-on-failure” – record screenshot after the test is failed

84. Screenshot Artifacts
● “on” – always record screenshot after the test is finished
● “off” – never record screenshot after the test is finished
● “only-on-failure” – record screenshot after the test is failed
Recommended 👍

85. Video Artifacts
● “on” – always record video of a test
● “off” – never record video of a test
● “retain-on-failure” – always record video of a test, but keep only videos of
failed test runs.
● “on-first-retry” – only record video when retrying test

86. Video Artifacts
● “on” – always record video of a test
● “off” – never record video of a test
● “retain-on-failure” – always record video of a test, but keep only videos of
failed test runs.
● “on-first-retry” – only record video when retrying test
Recommended 👍

87. Trace Artifacts
● “on” – always record trace of a test
● “off” – never record trace of a test
● “retain-on-failure” – always record trace of a test, but keep only traces of
failed test runs.
● “on-first-retry” – only record trace when retrying test
��

88. Trace Artifacts
● “on” – always record trace of a test
● “off” – never record trace of a test
● “retain-on-failure” – always record trace of a test, but keep only traces of
failed test runs.
● “on-first-retry” – only record trace when retrying test
��
Recommended 👍

89. # .github/workflows/tests.yml
on: [push]
jobs:
run_tests:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v2
- uses: actions/setup-node@v2
- run: npm ci
- run: npx playwright install-deps
- run: npx playwright install
- run: npx playwright test
G
i
t
h
u
b
A
c
t
i
o
n
s

90. # .github/workflows/tests.yml
on: [push]
jobs:
run_tests:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v2
- uses: actions/setup-node@v2
- run: npm ci
- run: npx playwright install-deps
- run: npx playwright install
- run: npx playwright test
- uses: actions/upload-artifact@v1
if: always()
with:
name: test-results
path: test-results
G
i
t
h
u
b
A
c
t
i
o
n
s
Uploading Artifacts

91. Act V
Playwright Tracing
🚀 Getting Started
🦄 Fixtures
🛠 Configuration
💎 Artifacts
󰨂 Tracing

92. Playwright Tracing

93. ● Playwright actions
● Playwright events
● DOM snapshots 🔥
● Screenshots
● Network log
● Console log
Playwright Tracing
trace.zip files

94. ● Playwright actions
● Playwright events
● DOM snapshots 🔥
● Screenshots
● Network log
● Console log
Playwright Tracing
● GUI tool to explore trace
files
● Bundled with Playwright
trace.zip files Trace Viewer

95. ● Playwright actions
● Playwright events
● DOM snapshots 🔥
● Screenshots
● Network log
● Console log
Playwright Tracing
● GUI tool to explore trace
files
● Bundled with Playwright
trace.zip files Trace Viewer
Time Travel Debugging

96. 🍿 Demo: Trace Viewer 🍿

97. Opening Playwright Trace

98. Timeline
Actions
Details
DOM Snapshot 🔥

99. 🍿 Demo: Post-mortem 🍿

100. Demo Recap

101. ● “Right click → Inspect” to open DevTools on DOM Snapshot
Demo Recap

102. Demo Recap
● “Right click → Inspect” to open DevTools on DOM Snapshot
● “playwright.selector($0)” in DevTools console to generate selector

103. Conclusion?
🚀 Getting Started
🦄 Fixtures
🛠 Configuration
💎 Artifacts
󰨂 Tracing

104. Web Testing
can be
Fun

105. Andrey Lushnikov
@playwrightweb
Q
u
e
s
t
i
o
n
s
?
Playwright Test
https:/
/aka.ms/playwright-slack
microsoft/playwright
@aslushnikov
aslushnikov@gmail.com