Playwright Test automation frameworktest

Playwright Test
Playful testing framework

● Cross-browser Web Testing Framework
● Node.js: JavaScript / TypeScript
● Free, Open Source, Sponsored by Microsoft
● Extensively used in the industry
What is Playwright Test?

● Historically, JavaScript test frameworks are built for unit tests
● Playwright Test is built for end-to-end tests:
○ Cross-browser — Chrome, Firefox & Safari
○ Parallelisation — tests are fast
○ Isolation — zero-overhead test isolation
○ Flexibility — pytest-like ﬁxture conﬁguration
Why yet another test runner?

Agenda
1. Getting Started
2. Fundamentals
3. Conﬁguration
4. Playwright Inspector & CodeGen
5. Playwright Tracing

Installation: npm init playwright

Test: e2e/example.spec.ts
1. Test Isolation

1. Test Isolation
2. Auto-waiting

1. Test Isolation
2. Auto-waiting 3. Web-First Assertions

❌ Old-School: Browser Restart
● Slow instantiation (>100ms)
● Huge memory overhead
✅ Playwright Test: Browser Contexts
● Full isolation
● Fast instantiation (~1ms)
● Low overhead Browser Context
Fundamentals: Test Isolation

❌ Old-School: timeouts to await elements
● Time does not exist in the cloud
● Timeouts are ineﬃcient
✅ Playwright Test: built-in auto-waiting
● Just Works!
● Happens for all actions (e.g. click, fill, press)
● No need for `setTimeout` calls
Loading...
Fundamentals: Auto-waiting

Fundamentals: Auto-waiting ✨

❌ Old-School: assert current state
● Web Applications are highly dynamic
● State is always in ﬂux
✅ Playwright Test: declare expected state
● Wait until the declared state is reached
● Web-First assertions
Fundamentals: Web-First Assertions

expect(locator).toHaveClass(expected)
expect(locator).toHaveCount(count)
expect(locator).toHaveCSS(name, value)
expect(locator).toHaveId(id)
expect(locator).toHaveJSProperty(name, value)
expect(locator).toHaveText(expected)
expect(page).toHaveTitle(title)
expect(page).toHaveURL(url)
expect(locator).toHaveValue(value)
expect(locator).toBeChecked()
expect(locator).toBeDisabled()
expect(locator).toBeEditable()
expect(locator).toBeEmpty()
expect(locator).toBeEnabled()
expect(locator).toBeFocused()
expect(locator).toBeHidden()
expect(locator).toBeVisible()
expect(locator).toContainText(text)
expect(locator).toHaveAttribute(name)

📍 Locators API
● Locator := (page, selector)
● Create locators with page.locator(selector)
● Represents a view to the element(s) on the page
● Re-queries page on each method call
● “strict” by default
● Useful in POMs

await expect(page.locator('.products .item')).toHaveText(['soap', 'rope']);

1. Must be awaited

1. Must be awaited
2. Re-queries given locator

1. Must be awaited
2. Re-queries given locator
3. Waiting until it has two elements
with given texts

// example.spec.ts
import { test, expect } from '@playwright/test';
test('basic test', async ({ page }) => {
await page.goto('https://playwright.dev/');
await page.locator('text=Get started').click();
await expect(page).toHaveTitle(/Getting started/);
});

// example.spec.ts
});
// playwright.config.ts
import { PlaywrightTestConfig } from '@playwright/test';
const config: PlaywrightTestConfig = {
projects: [
],
};
export default config;

// example.spec.ts
});
projects: [
{
name: 'Desktop Chrome',
use: { browserName: 'chromium', },
},
],
};

// example.spec.ts
});
projects: [
{
},
],
};
Run 1

projects: [
{
},
{
name: 'Desktop Firefox',
use: { browserName: 'firefox', },
},
{
name: 'Desktop Safari',
use: { browserName: 'webkit', },
}
],
};
// example.spec.ts
});
Run 1
R
u
n
2
R
u
n
3

Granular Configuration: france.spec.ts
● Per-file configuration
● Per-suite configuration

// france.spec.ts
T
y
p
e
S
c
r
i
p
t

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

// france.spec.ts
test('should work', async ({ page }) => { /* ... test goes here ... */ });
test('should use euro', async ({ page }) => { /* ... */ });
T
y
p
e
S
c
r
i
p
t

// france.spec.ts
test.describe('light theme', () => {
});
T
y
p
e
S
c
r
i
p
t

// france.spec.ts
test.use({ colorScheme: 'light' }); // per-suite configuration
});
T
y
p
e
S
c
r
i
p
t

// france.spec.ts
test('should be light', async ({ page }) => { /* ... */ });
});
T
y
p
e
S
c
r
i
p
t

// france.spec.ts
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

● 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
Conﬁguration Options
https:/
/aka.ms/playwright/ﬁxtures

Conﬁguration: Data-Driven Tests

// check-urls.spec.ts
T
y
p
e
S
c
r
i
p
t

const urls = require('./urls.json');
T
y
p
e
S
c
r
i
p
t

for (const url of urls) {
}
T
y
p
e
S
c
r
i
p
t

test(`check ${url}`, async ({ page }) => {
await page.goto(url);
});
}
T
y
p
e
S
c
r
i
p
t

test(`check ${url}`, async ({ page }) => {
await page.goto(url);
});
}
T
y
p
e
S
c
r
i
p
t
NOTE: Make sure to have
diﬀerent test titles

projects: [
{
},
{
},
{
}
],
};

reporter: 'dot',
projects: [
{
},
{
},
{
}
],
};

reporter: process.env.CI ? 'dot' : 'line',
projects: [
{
},
{
},
{
}
],
};

reporter: [
process.env.CI ? ['dot'] : ['list'],
['json', { outputFile: 'test-results.json' }],
],
projects: [
{
},
{
},
{
}
],
};

reporter: [
],
projects: [
{
},
{
},
{
}
],
};
Built-in reporters
➔ dot
➔ list
➔ line
➔ json
➔ junit
Third-party reporters
➔ allure-playwright
https://aka.ms/playwright/reporters

import { PlaywrightTestConfig, devices } from '@playwright/test';
reporter: [
],
projects: [
{
},
{
},
{
}
],
};

reporter: [
],
projects: [
{
use: devices['Desktop Chrome'],
},
{
},
{
}
],
};

reporter: [
],
projects: [
{
},
{
use: devices['Desktop Firefox'],
},
{
}
],
};

reporter: [
],
projects: [
{
},
{
},
{
name: 'Mobile Safari',
}
],
};

reporter: [
],
projects: [
{
},
{
},
{
use: devices['iPhone 12 Pro'],
}
],
};

Chapter 4 Playwright
Inspector & Codegen

Playwright
Inspector
Control Panel
Actions
Selectors Playground
Source Code

Chapter 5 Post-mortem Debugging
Playwright Tracing

Post-Mortem Debugging
● Post-Mortem Debugging – debugging test failures on CI without being
able to debug locally.
● Test Artifacts – any by-product of test running that helps debug test
failures.
○ Logs
○ Screenshots
○ Videos

Unique Artifact: Tracing
screenshots
Playwright
Tracing
videos

● Playwright actions
● Playwright events
● Screencast
● Network log
● Console log
● DOM snapshots 🔥
Playwright Tracing
trace.zip ﬁles

● Playwright actions
● Playwright events
● Screencast
● Network log
● Console log
● DOM snapshots 🔥
Playwright Tracing
● GUI tool to explore trace
ﬁles
● Bundled with Playwright
trace.zip ﬁles Trace Viewer

Playwright Tracing: Workflow
Enable trace collection in playwright.config.ts
Setup CI to upload trace files
Download & Inspect trace files with Playwright Trace Viewer

projects: [{
}, {
}, {
}],
};
T
y
p
e
S
c
r
i
p
t

retries: 2,
projects: [{
}, {
}, {
}],
};
T
y
p
e
S
c
r
i
p
t

retries: 2,
use: {
trace: 'on-first-retry',
},
projects: [{
}, {
}, {
}],
};
T
y
p
e
S
c
r
i
p
t

retries: 2,
use: {
trace: 'on-first-retry',
},
projects: [{
}, {
}, {
}],
};
Enabling Trace Collection
T
y
p
e
S
c
r
i
p
t

# .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 --with-deps
- run: npm run test:e2e
G
i
t
h
u
b
A
c
t
i
o
n
s

on: [push]
jobs:
run_tests:
steps:
- run: npm ci
- uses: actions/upload-artifact@v2
if: always()
with:
name: test-results
path: test-results
G
i
t
h
u
b
A
c
t
i
o
n
s
Uploading Artifacts

on: [push]
jobs:
run_tests:
steps:
- run: npm ci
- uses: actions/upload-artifact@v2
if: always()
with:
name: test-results
path: test-results
G
i
t
h
u
b
A
c
t
i
o
n
s
Uploading Artifacts
← default folder with all artifacts

Opening Playwright Trace Viewer

Timeline
Actions
List
Action
Details
DOM Snapshot 🔥

Playwright Test: Playful Testing Framework
1. Get started with npm init playwright
2. Conﬁgure everything at playwright.config.ts
3. Test iPhone, customize reporters, generate tests
4. Debug tests with Playwright Inspector
5. Author tests with Playwright CodeGen
6. Post-mortem with Playwright Tracing

Playwright
● Cross-browser Web Testing and Automation Framework
● Documentation: https:/
/playwright.dev
● Source / Issues: https:/
/github.com/microsoft/playwright
● Social:
○ https:/
/aka.ms/playwright/slack
○ https:/
/aka.ms/playwright/twitter
○ https:/
/aka.ms/playwright/youtube

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

Playwright Test automation frameworktest

More Related Content

Similar to Playwright Test automation frameworktest (20)

Recently uploaded (20)

Playwright Test automation frameworktest