|
1 | | -import { expect, test } from "@playwright/test"; |
| 1 | +import { expect, test } from '@playwright/test' |
2 | 2 |
|
3 | | -test("images are rendered in the production build", async ({ page }) => { |
4 | | - await page.goto("/"); |
| 3 | +test('images are rendered in the production build', async ({ page }) => { |
| 4 | + await page.goto('/') |
5 | 5 |
|
6 | 6 | // Wait for the page to load |
7 | | - await expect(page.locator("h1")).toBeVisible(); |
| 7 | + await expect(page.locator('h1')).toBeVisible() |
8 | 8 |
|
9 | 9 | // Check all img elements have loaded (naturalWidth > 0 means the image loaded) |
10 | | - const images = page.locator("img"); |
11 | | - const count = await images.count(); |
12 | | - expect(count).toBeGreaterThan(0); |
| 10 | + const images = page.locator('img') |
| 11 | + const count = await images.count() |
| 12 | + expect(count).toBeGreaterThan(0) |
13 | 13 |
|
14 | 14 | for (let i = 0; i < count; i++) { |
15 | | - const img = images.nth(i); |
16 | | - await expect(img).toBeVisible(); |
17 | | - const naturalWidth = await img.evaluate((el: HTMLImageElement) => el.naturalWidth); |
| 15 | + const img = images.nth(i) |
| 16 | + await expect(img).toBeVisible() |
| 17 | + const naturalWidth = await img.evaluate((el: HTMLImageElement) => el.naturalWidth) |
18 | 18 | expect( |
19 | 19 | naturalWidth, |
20 | | - `img[${i}] (${await img.getAttribute("src")}) should have loaded`, |
21 | | - ).toBeGreaterThan(0); |
| 20 | + `img[${i}] (${await img.getAttribute('src')}) should have loaded`, |
| 21 | + ).toBeGreaterThan(0) |
22 | 22 | } |
23 | | -}); |
| 23 | +}) |
24 | 24 |
|
25 | | -test("picture elements have source variants", async ({ page }) => { |
26 | | - await page.goto("/"); |
| 25 | +test('picture elements have source variants', async ({ page }) => { |
| 26 | + await page.goto('/') |
27 | 27 |
|
28 | | - const pictures = page.locator("picture"); |
29 | | - const count = await pictures.count(); |
30 | | - expect(count).toBeGreaterThan(0); |
| 28 | + const pictures = page.locator('picture') |
| 29 | + const count = await pictures.count() |
| 30 | + expect(count).toBeGreaterThan(0) |
31 | 31 |
|
32 | 32 | for (let i = 0; i < count; i++) { |
33 | | - const sources = pictures.nth(i).locator("source"); |
34 | | - const sourceCount = await sources.count(); |
35 | | - expect(sourceCount, `picture[${i}] should have source elements`).toBeGreaterThan(0); |
| 33 | + const sources = pictures.nth(i).locator('source') |
| 34 | + const sourceCount = await sources.count() |
| 35 | + expect(sourceCount, `picture[${i}] should have source elements`).toBeGreaterThan(0) |
36 | 36 |
|
37 | 37 | // Verify source srcset attributes reference actual files (not virtual IDs) |
38 | 38 | for (let j = 0; j < sourceCount; j++) { |
39 | | - const srcset = await sources.nth(j).getAttribute("srcset"); |
40 | | - expect(srcset, `picture[${i}] source[${j}] should have srcset`).toBeTruthy(); |
41 | | - expect(srcset).not.toContain("/@imagepresets/"); |
| 39 | + const srcset = await sources.nth(j).getAttribute('srcset') |
| 40 | + expect(srcset, `picture[${i}] source[${j}] should have srcset`).toBeTruthy() |
| 41 | + expect(srcset).not.toContain('/@imagepresets/') |
42 | 42 | } |
43 | 43 | } |
44 | | -}); |
| 44 | +}) |
45 | 45 |
|
46 | | -test("processed image files are served correctly", async ({ page, request }) => { |
47 | | - await page.goto("/"); |
| 46 | +test('processed image files are served correctly', async ({ page, request }) => { |
| 47 | + await page.goto('/') |
48 | 48 |
|
49 | 49 | // Collect all image URLs from srcset and src attributes |
50 | 50 | const imageUrls = await page.evaluate(() => { |
51 | | - const urls = new Set<string>(); |
52 | | - for (const source of document.querySelectorAll("source[srcset]")) { |
53 | | - const srcset = source.getAttribute("srcset")!; |
54 | | - for (const entry of srcset.split(",")) { |
55 | | - const url = entry.trim().split(/\s+/)[0]; |
56 | | - if (url) urls.add(url); |
| 51 | + const urls = new Set<string>() |
| 52 | + for (const source of document.querySelectorAll('source[srcset]')) { |
| 53 | + const srcset = source.getAttribute('srcset')! |
| 54 | + for (const entry of srcset.split(',')) { |
| 55 | + const url = entry.trim().split(/\s+/)[0] |
| 56 | + if (url) urls.add(url) |
57 | 57 | } |
58 | 58 | } |
59 | | - for (const img of document.querySelectorAll("img[src]")) { |
60 | | - const src = img.getAttribute("src")!; |
61 | | - if (src && !src.startsWith("data:")) urls.add(src); |
| 59 | + for (const img of document.querySelectorAll('img[src]')) { |
| 60 | + const src = img.getAttribute('src')! |
| 61 | + if (src && !src.startsWith('data:')) urls.add(src) |
62 | 62 | } |
63 | | - return [...urls]; |
64 | | - }); |
| 63 | + return [...urls] |
| 64 | + }) |
65 | 65 |
|
66 | | - expect(imageUrls.length).toBeGreaterThan(0); |
| 66 | + expect(imageUrls.length).toBeGreaterThan(0) |
67 | 67 |
|
68 | 68 | // Verify each processed image URL returns 200 |
69 | 69 | for (const url of imageUrls) { |
70 | | - const response = await request.get(url); |
71 | | - expect(response.status(), `${url} should be served`).toBe(200); |
72 | | - expect(response.headers()["content-type"]).toMatch(/^image\//); |
| 70 | + const response = await request.get(url) |
| 71 | + expect(response.status(), `${url} should be served`).toBe(200) |
| 72 | + expect(response.headers()['content-type']).toMatch(/^image\//) |
73 | 73 | } |
74 | | -}); |
| 74 | +}) |
0 commit comments