Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.
Awesome Lists | Featured Topics | Projects
https://github.com/karlhorky/playwright-image-loading-tests-with-next-js

Last synced: 10 days ago
JSON representation
Host: GitHub
URL: https://github.com/karlhorky/playwright-image-loading-tests-with-next-js
Owner: karlhorky
Created: 2023-11-08T12:20:36.000Z (about 1 year ago)
Default Branch: main
Last Pushed: 2024-05-13T05:28:09.000Z (6 months ago)
Last Synced: 2024-10-25T23:11:33.500Z (18 days ago)
Language: TypeScript
Size: 1.13 MB
Stars: 2
Watchers: 2
Forks: 0
Open Issues: 0
Metadata Files:
- Readme: README.md
Awesome Lists containing this project

README

        # Playwright Image Loading Tests with Next.js

For official Playwright recommendation for issue [[Question] Wait for image to be loaded #6046 (comment)](https://github.com/microsoft/playwright/issues/6046#issuecomment-1800102438)

Exploration of `img.complete` and `img.naturalWidth` and see what the detection, performance and robustness characteristics look like across multiple test runs, with the following correct scenarios and breakage scenarios:

1.  Single image: image loads successfully

2.  Single image: image loads successfully (slow - large image on 3G network speed)

3.  Single image: image loads unsuccessfully (404)

4.  Single image: image loads unsuccessfully (malformed image)

5.  Single image: image loads unsuccessfully (host unreachable)

6.  Multiple images: all images load successfully

7.  Multiple images: all images load successfully (slow - large images on 3G network speed)

8.  Multiple images: all images load successfully (lazy loading out of viewport)

9.  Multiple images: 1st image loads unsuccessfully (404), rest load successfully

10. Multiple images: all images but last load successfully, last image loads unsuccessfully (404)

11. Multiple images: all images load unsuccessfully (404)

12. Multiple images: all images load unsuccessfully (host unreachable)

## Results

### 1. Single image: image loads successfully

```js

```

The following is the console output from the test run for `img.complete` and `img.naturalWidth`:

`c`: complete with `true` or `false`

`nW`: naturalWidth with `0` or `1+` (1+ means `> 0`)

```

c: f nW: 0

c: t nW: 1+

c: t nW: 1+

...

```

Playwright test is successful.

```ts

await page.goto('/01-single-success');

await expect(page.locator('img')).toHaveJSProperty('complete', true);

await expect(page.locator('img')).not.toHaveJSProperty('naturalWidth', 0);

```

### 2. Single image: image loads successfully (slow - large image on 3G network speed)

```js

```

```

c: f nW: 0

c: t nW: 1+

c: t nW: 1+

...

```

Playwright test is successful. For this test the network speed was throttled to 3G.

```ts

const client = await page.context().newCDPSession(page);

await client.send('Network.enable');

await client.send('Network.emulateNetworkConditions', {

  offline: false,

  downloadThroughput: ((500 * 1000) / 8) * 0.8,

  uploadThroughput: ((500 * 1000) / 8) * 0.8,

  latency: 70,

});

await page.goto('/02-single-success-slow');

await expect(page.locator('img')).toHaveJSProperty('complete', true);

await expect(page.locator('img')).not.toHaveJSProperty('naturalWidth', 0);

```

### 3. Single image: image loads unsuccessfully (404)

```js

```

```

c: f nW: 0

c: t nW: 0

c: t nW: 0

...

```

The Playwright test below for for `img.naturalWidth` fails, because the is broken (404) but reports `img.complete = true`.

```

Failed to load resource: the server responded with a status of 404 (Not Found)

```

```ts

await page.goto('/03-single-fail-404');

await expect(page.locator('img')).toHaveJSProperty('complete', true);

await expect(page.locator('img')).not.toHaveJSProperty('naturalWidth', 0);

```

### 4. Single image: image loads unsuccessfully (malformed image)

```js

```

```

c: f nW: 0

c: t nW: 0

c: t nW: 0

...

```

The Playwright test below for for `img.naturalWidth` fails, because the is broken (malformed) but reports `img.complete = true`.

```

Failed to load resource: the server responded with a status of 400 (Bad Request)

```

```ts

await page.goto('/04-single-fail-malformed');

await expect(page.locator('img')).toHaveJSProperty('complete', true);

await expect(page.locator('img')).not.toHaveJSProperty('naturalWidth', 0);

```

### 5. Single image: image loads unsuccessfully (host unreachable)

```js

```

```

c: f nW: 0

c: t nW: 0

c: t nW: 0

...

```

The Playwright test below for for `img.naturalWidth` fails, because the is broken (host unreachable) but reports `img.complete = true`.

```

Failed to load resource: the server responded with a status of 500 (Internal Server Error)

```

```ts

await page.goto('/05-single-fail-unreachable');

await expect(page.locator('img')).toHaveJSProperty('complete', true);

await expect(page.locator('img')).not.toHaveJSProperty('naturalWidth', 0);

```

### 6. Multiple images: all images load successfully

```js

  

  


  

  


  

  


  

  


  

  


  

  


  

  


```

```

c: f f f f f f f nW: 0 0 0 0 0 0 0

c: t t t t t t t nW: 1+ 1+ 1+ 1+ 1+ 1+ 1+

c: t t t t t t t nW: 1+ 1+ 1+ 1+ 1+ 1+ 1+

...

```

Playwright test is successful.

```ts

await page.goto('/06-multiple-success');

for (const img of await page.getByRole('img').all()) {

  await expect(img).toHaveJSProperty('complete', true);

  await expect(img).not.toHaveJSProperty('naturalWidth', 0);

}

```

### 7. Multiple images: all images load successfully (slow - large images on 3G network speed)

```js

  

  


  

  


  

  


  

  


  

  


  

  


  

```

```

c: f f f f f f f nW: 0 0 0 0 0 0 0

c: t t t f f f f nW: 1+ 1+ 1+ 0 0 0 0

c: t t t t f f f nW: 1+ 1+ 1+ 1+ 0 0 0

c: t t t t t f f nW: 1+ 1+ 1+ 1+ 1+ 0 0

c: t t t t t t f nW: 1+ 1+ 1+ 1+ 1+ 1+ 0

c: t t t t t t t nW: 1+ 1+ 1+ 1+ 1+ 1+ 1+

c: t t t t t t t nW: 1+ 1+ 1+ 1+ 1+ 1+ 1+

...

```

Playwright test is successful. For this test the network speed was throttled to 3G.

```ts

const client = await page.context().newCDPSession(page);

await client.send('Network.enable');

await client.send('Network.emulateNetworkConditions', {

  offline: false,

  downloadThroughput: ((500 * 1000) / 8) * 0.8,

  uploadThroughput: ((500 * 1000) / 8) * 0.8,

  latency: 70,

});

await page.goto('/07-multiple-success-slow');

for (const img of await page.getByRole('img').all()) {

  await expect(img).toHaveJSProperty('complete', true);

  await expect(img).not.toHaveJSProperty('naturalWidth', 0);

}

```

### 8. Multiple images: all images load successfully (lazy loading out of viewport)

```js

...

  

  


  


  


  


  


  


  


  


  


  


  


  


  

...

```

```

c: f f f f f f f nW: 0 0 0 0 0 0 0

c: t t t t t t t nW: 1+ 1+ 1+ 1+ 1+ 1+ 1+

c: t t t t t t t nW: 1+ 1+ 1+ 1+ 1+ 1+ 1+

...

```

Playwright test is successful.

```ts

await page.goto('/08-multiple-success-lazy');

for (const img of await page.getByRole('img').all()) {

  await expect(img).toHaveJSProperty('complete', true);

  await expect(img).not.toHaveJSProperty('naturalWidth', 0);

}

```

### 9. Multiple images: 1st image loads unsuccessfully (404), rest load successfully

```js

  

  


  

  


  

  


  

  


  

  


  

  


  

```

```

c: f f f f f f f nW: 0 0 0 0 0 0 0

c: f t t t t t t nW: 0 1+ 1+ 1+ 1+ 1+ 1+

c: t t t t t t t nW: 0 1+ 1+ 1+ 1+ 1+ 1+

c: t t t t t t t nW: 0 1+ 1+ 1+ 1+ 1+ 1+

...

```

The Playwright test below for `img.loaded` fails, because the first image is broken (404) but reports `img.complete = 'true'`

```

Failed to load resource: the server responded with a status of 404 (Not Found)

```

```ts

await page.goto('/09-multiple-1st-fail-rest-success');

for (const img of await page.getByRole('img').all()) {

  await expect(img).toHaveJSProperty('complete', true);

  await expect(img).not.toHaveJSProperty('naturalWidth', 0);

}

```

### 10. Multiple images: all images but last load successfully, last image loads unsuccessfully (404)

```js

  

  


  

  


  

  


  

  


  

  


  

  


  

```

```

c: f f f f f f f nW: 0 0 0 0 0 0 0

c: t t t t t t f nW: 1+ 1+ 1+ 1+ 1+ 1+ 0

c: t t t t t t t nW: 1+ 1+ 1+ 1+ 1+ 1+ 0

c: t t t t t t t nW: 1+ 1+ 1+ 1+ 1+ 1+ 0

...

```

The Playwright test below for `img.loaded` fails, because the last image is broken (404) but reports `img.complete = 'true'`

```

Failed to load resource: the server responded with a status of 404 (Not Found)

```

```ts

await page.goto('/10-multiple-last-fail-rest-success');

for (const img of await page.getByRole('img').all()) {

  await expect(img).toHaveJSProperty('complete', true);

  await expect(img).not.toHaveJSProperty('naturalWidth', 0);

}

```

### 11. Multiple images: all images load unsuccessfully (404)

```js

  

  


  

  


  

  


  

  


  

  


  

  


  

```

```

c: f f f f f f f nW: 0 0 0 0 0 0 0

c: t t t t t t t nW: 0 0 0 0 0 0 0

c: t t t t t t t nW: 0 0 0 0 0 0 0

...

```

The Playwright test below for `img.loaded` fails, because all images are broken (404) but reports `img.complete = 'true'`

```

Failed to load resource: the server responded with a status of 404 (Not Found)

```

```ts

await page.goto('/11-multiple-fail-404');

for (const img of await page.getByRole('img').all()) {

  await expect(img).toHaveJSProperty('complete', true);

  await expect(img).not.toHaveJSProperty('naturalWidth', 0);

}

```

### 12. Multiple images: all images load unsuccessfully (host unreachable)

```js



  

  


  

  


  

  


  

  


  

  


  

  


  



```

```

c: f f f f f f f nW: 0 0 0 0 0 0 0

c: t t t t t t t nW: 0 0 0 0 0 0 0

c: t t t t t t t nW: 0 0 0 0 0 0 0

...

```

The Playwright test below for `img.loaded` fails, because all images are broken (host unreachable) but reports `img.complete = 'true'`

```

Failed to load resource: the server responded with a status of 500 (Internal Server Error)

```

```ts

await page.goto('/12-multiple-fail-unreachable');

for (const img of await page.getByRole('img').all()) {

  await expect(img).toHaveJSProperty('complete', true);

  await expect(img).not.toHaveJSProperty('naturalWidth', 0);

}

```