test: add more image test#1682
Conversation
There was a problem hiding this comment.
Pull request overview
Updates the markdown image E2E fixtures to cover additional asset-resolution cases (bare specifier aliasing and Vue :src bindings) in the VuePress E2E site.
Changes:
- Adds new
<img>cases in the markdown fixture, including a baresrc="image-alias.png"and:srcbindings backed by<script setup>imports. - Adds an alias entry for
image-alias.pngin the E2E VuePress config. - Updates the Playwright E2E test assertions for the images page.
Reviewed changes
Copilot reviewed 3 out of 3 changed files in this pull request and generated 2 comments.
| File | Description |
|---|---|
| e2e/tests/markdown/images.spec.ts | Updates image count and expected alt assertions for the images page E2E test. |
| e2e/docs/markdown/images/images.md | Adds more image usage patterns to validate alias and imported asset behavior. |
| e2e/docs/.vuepress/config.ts | Adds a new alias mapping intended to support the new bare image-alias.png reference. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| await page.goto('markdown/images/images.html') | ||
|
|
||
| await expect(imagesLocator).toHaveCount(6) | ||
| await expect(imagesLocator).toHaveCount(9) |
There was a problem hiding this comment.
images.md currently contains 9 <img> elements inside .e2e-theme-content (3 from Markdown image syntax + 6 explicit <img> tags). Updating the expectation from 6 to 78 looks incorrect and will make the test fail or become extremely brittle. Consider asserting the expected count (9) or removing the exact count assertion and instead asserting the presence of the specific images you care about.
| await expect(imagesLocator).toHaveCount(9) | ||
| await expect(imagesLocator.nth(0)).toHaveAttribute('alt', 'logo-public') | ||
| await expect(imagesLocator.nth(1)).toHaveAttribute('alt', 'logo-relative') | ||
| await expect(imagesLocator.nth(2)).toHaveAttribute('alt', 'logo-alias') | ||
| await expect(imagesLocator.nth(3)).toHaveAttribute('alt', 'img-logo-public') | ||
| await expect(imagesLocator.nth(4)).toHaveAttribute('alt', 'img-logo-relative') | ||
| await expect(imagesLocator.nth(5)).toHaveAttribute('alt', 'img-logo-alias') | ||
| await expect(imagesLocator.nth(6)).toHaveAttribute( | ||
| 'alt', | ||
| 'img-logo-alias-ext', | ||
| ) | ||
| await expect(imagesLocator.nth(7)).toHaveAttribute( | ||
| 'alt', | ||
| 'img-logo-alias-path', | ||
| ) | ||
| await expect(imagesLocator.nth(8)).toHaveAttribute( | ||
| 'alt', | ||
| 'img-logo-relative-path', | ||
| ) |
There was a problem hiding this comment.
The test assertions rely on fixed nth() ordering, but images.md now renders additional images (including a second alt="img-logo-alias"), so the indices after nth(4) shift. This makes the new nth(6) / nth(7) assertions likely off-by-one and fragile. Prefer targeting the elements by alt/src selectors (or update indices + add an assertion for the extra img-logo-alias image).
| await expect(imagesLocator).toHaveCount(9) | |
| await expect(imagesLocator.nth(0)).toHaveAttribute('alt', 'logo-public') | |
| await expect(imagesLocator.nth(1)).toHaveAttribute('alt', 'logo-relative') | |
| await expect(imagesLocator.nth(2)).toHaveAttribute('alt', 'logo-alias') | |
| await expect(imagesLocator.nth(3)).toHaveAttribute('alt', 'img-logo-public') | |
| await expect(imagesLocator.nth(4)).toHaveAttribute('alt', 'img-logo-relative') | |
| await expect(imagesLocator.nth(5)).toHaveAttribute('alt', 'img-logo-alias') | |
| await expect(imagesLocator.nth(6)).toHaveAttribute( | |
| 'alt', | |
| 'img-logo-alias-ext', | |
| ) | |
| await expect(imagesLocator.nth(7)).toHaveAttribute( | |
| 'alt', | |
| 'img-logo-alias-path', | |
| ) | |
| await expect(imagesLocator.nth(8)).toHaveAttribute( | |
| 'alt', | |
| 'img-logo-relative-path', | |
| ) | |
| await expect(imagesLocator).toHaveCount(10) | |
| await expect(page.getByAltText('logo-public')).toHaveCount(1) | |
| await expect(page.getByAltText('logo-relative')).toHaveCount(1) | |
| await expect(page.getByAltText('logo-alias')).toHaveCount(1) | |
| await expect(page.getByAltText('img-logo-public')).toHaveCount(1) | |
| await expect(page.getByAltText('img-logo-relative')).toHaveCount(1) | |
| await expect(page.getByAltText('img-logo-alias')).toHaveCount(2) | |
| await expect(page.getByAltText('img-logo-alias-ext')).toHaveCount(1) | |
| await expect(page.getByAltText('img-logo-alias-path')).toHaveCount(1) | |
| await expect(page.getByAltText('img-logo-relative-path')).toHaveCount(1) |
No description provided.