Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/karlhorky/playwright-tricks
A collection of helpful tricks for Playwright tests
https://github.com/karlhorky/playwright-tricks
playwright testing
Last synced: 3 days ago
JSON representation
A collection of helpful tricks for Playwright tests
- Host: GitHub
- URL: https://github.com/karlhorky/playwright-tricks
- Owner: karlhorky
- Created: 2024-03-18T16:15:05.000Z (8 months ago)
- Default Branch: main
- Last Pushed: 2024-07-17T17:09:48.000Z (4 months ago)
- Last Synced: 2024-10-25T23:10:45.261Z (11 days ago)
- Topics: playwright, testing
- Homepage:
- Size: 11.7 KB
- Stars: 6
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Playwright Tricks
A collection of helpful tricks for [Playwright](https://playwright.dev/) tests
## Load All Lazy Images
Scroll to all visible lazy-loaded images and wait for [successful loading of image](#test-image-loading):
```ts
const lazyImages = await page.locator('img[loading="lazy"]:visible').all();for (const lazyImage of lazyImages) {
await lazyImage.scrollIntoViewIfNeeded();
await expect(lazyImage).not.toHaveJSProperty('naturalWidth', 0);
}
```Be aware, [using `.all()` can be problematic if new images are being added, removed, shown or hidden while the test code is running](https://github.com/microsoft/playwright/issues/31737).
One workaround for this is to assert the length of the `.all()` array (if you know it) to wait for it to stabilize:
```ts
const lazyImagesLocator = page.locator('img[loading="lazy"]:visible');// Assert on length to wait for image visibility to stabilize
// after client-side JavaScript hides some images
// https://github.com/microsoft/playwright/issues/31737#issuecomment-2233775909
await expect(lazyImagesLocator).toHaveCount(13);const lazyImages = await lazyImagesLocator.all();
for (const lazyImage of lazyImages) {
await lazyImage.scrollIntoViewIfNeeded();
await expect(lazyImage).not.toHaveJSProperty('naturalWidth', 0);
}
```## Screenshot Comparison Tests of PDFs
Playwright does not (as of June 2024) have support for [visual comparison testing](https://playwright.dev/docs/test-snapshots) with PDFs.
There are [many issues asking for this feature](https://github.com/microsoft/playwright/issues?q=is%3Aissue+sort%3Aupdated-desc+pdfs+is%3Aclosed), but the current position of the Playwright team is that [PDF.js should be used instead](https://github.com/microsoft/playwright/issues/19253#issuecomment-1338955863), to render the PDF to a canvas.
It's not clear how the Playwright team suggests to do this, but one way is to navigate to `about:blank`, use [`page.setContent()`](https://playwright.dev/docs/api/class-page#page-set-content) to add a PDF.js viewer to the page, which accepts a URL, and then use [`expect(page).toHaveScreenshot()`](https://playwright.dev/docs/api/class-pageassertions#page-assertions-to-have-screenshot-2):
```ts
// HTML template string no-op for VS Code highlighting / formatting
function html(strings: TemplateStringsArray, ...values: unknown[]) {
return strings.reduce((result, string, i) => {
return result + string + (values[i] ?? '');
}, '');
}test('PDF has screenshot', async ({ page }) => {
// Go to page without Content-Security-Policy header, to avoid CSP
// prevention of script loading from https://mozilla.github.io
await page.goto('about:blank');await page.setContent(html`
pdfjsLib.GlobalWorkerOptions.workerSrc =
'https://mozilla.github.io/pdf.js/build/pdf.worker.mjs';try {
const pdf = await pdfjsLib.getDocument(
'https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/examples/learning/helloworld.pdf',
).promise;const page = await pdf.getPage(1);
const viewport = page.getViewport({ scale: 1.5 });const canvas = document.querySelector('canvas');
canvas.height = viewport.height;
canvas.width = viewport.width;await page.render({
canvasContext: canvas.getContext('2d'),
viewport,
}).promise;
} catch (error) {
console.error('Error loading PDF:', error);
}
`);await page.waitForTimeout(1000);
await expect(page).toHaveScreenshot({ fullPage: true });
});
```## Test Image Loading
Test that `` elements have a `src` attribute that is reachable and responds with image data:
```ts
const img = page.locator('img');
await expect(img).not.toHaveJSProperty('naturalWidth', 0);
```Source: https://github.com/microsoft/playwright/issues/6046#issuecomment-1803609118