test(list): screenshot capture only the list container (#27571)

Issue number: N/A

---------

<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->

<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->

## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->

The basic list test screenshots capture a portion of the box shadow from
the `ion-header`.

## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->

- Removes the `ion-header` from the test template for screenshot capture
- Only visually captures the `ion-list` 

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

<!-- If this introduces a breaking change, please describe the impact
and migration path for existing applications below. -->


## Other information

<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->

---------

Co-authored-by: ionitron <hi@ionicframework.com>
This commit is contained in:
Sean Perkins
2023-05-30 15:16:56 -04:00
committed by GitHub
parent 4ddb0a93d2
commit 99bb59b2e6
7 changed files with 14 additions and 1 deletions

View File

@ -4,7 +4,20 @@ import { configs, test } from '@utils/test/playwright';
configs().forEach(({ title, screenshot, config }) => { configs().forEach(({ title, screenshot, config }) => {
test.describe(title('list: basic'), () => { test.describe(title('list: basic'), () => {
test('should not have visual regressions', async ({ page }) => { test('should not have visual regressions', async ({ page }) => {
await page.goto(`/src/components/list/test/basic`, config); await page.setContent(
`
<ion-content>
<ion-list>
<ion-item>Pokémon Yellow</ion-item>
<ion-item>Super Metroid</ion-item>
<ion-item>Mega Man X</ion-item>
<ion-item>The Legend of Zelda</ion-item>
<ion-item lines="full">Halo</ion-item>
</ion-list>
</ion-content>
`,
config
);
const list = page.locator('ion-list'); const list = page.locator('ion-list');

Binary file not shown.

Before

Width:  |  Height:  |  Size: 9.5 KiB

After

Width:  |  Height:  |  Size: 9.5 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 11 KiB

After

Width:  |  Height:  |  Size: 11 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 7.9 KiB

After

Width:  |  Height:  |  Size: 7.8 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 9.5 KiB

After

Width:  |  Height:  |  Size: 9.4 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 11 KiB

After

Width:  |  Height:  |  Size: 11 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 7.8 KiB

After

Width:  |  Height:  |  Size: 7.8 KiB