Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file added images/samples/images/webshop-login.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
17 changes: 14 additions & 3 deletions learn/playwright/performance.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -210,10 +210,21 @@ test('basic performance paint timing', async ({ page }) => {

```json
[
{ name: 'first-paint', entryType: 'paint', startTime: 1149.5, duration: 0 },
{ name: 'first-contentful-paint', entryType: 'paint', startTime: 1149.5, duration: 0 }
{
"name": "first-paint",
"entryType": "paint",
"startTime": 1149.5,
"duration": 0
},
{
"name": "first-contentful-paint",
"entryType": "paint",
"startTime": 1149.5,
"duration": 0
}
]

```

#### Largest Contentful Paint API (`largest-contentful-paint`)

Expand Down Expand Up @@ -354,7 +365,7 @@ The DevTools Protocol is quite extensive. We recommend exploring the [documentat

Lighthouse can easily be used programmatically with Playwright to gather values and scores for different metrics, like [Time To Interactive (TTI)](https://web.dev/interactive/):

```js
```js measure-performance.js
const chromeLauncher = require('chrome-launcher')
const { chromium } = require('playwright')
const lighthouse = require('lighthouse')
Expand Down
3 changes: 1 addition & 2 deletions learn/playwright/test-fixtures.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -28,8 +28,7 @@ At their core, fixtures in Playwright are predefined components like `page`, `co
When writing multiple tests for a single site or service, you're likely to end up performing the same tasks over and over, so we'd like to add fixtures to our Playwright tests that developers can re-use, rather than copying and pasting big blocks of code. This helps us follow the DRY principle: don't repeat yourself when writing code!

## Why we need custom fixtures
In our web shop, we've got a login process that we want to simulate and test before doing further account actions:

In our [web shop](https://danube-webshop.herokuapp.com/), we've got a login process that we want to simulate and test before doing further account actions:
![A web shop login dialog](/images/samples/images/webshop-login.png)

To open this dialog and log in, we might use some lines like the following:
Expand Down