refactor(checkbox): update according to design #17851
build.yml
on: pull_request
build-core
1m 35s
Matrix: test-core-screenshot
test-core-clean-build
11s
test-core-lint
59s
test-core-spec
54s
verify-screenshots
2s
Matrix: test-angular-e2e
Matrix: test-react-e2e
Matrix: test-react-router-e2e
Matrix: test-vue-e2e
verify-test-angular-e2e
3s
verify-test-react-e2e
2s
verify-test-react-router-e2e
3s
verify-test-vue-e2e
2s
Annotations
55 errors and 6 notices
|
[Mobile Chrome] › src/components/checkbox/test/bottom-content/checkbox.e2e.ts:121:11 › checkbox: helper text rendering - ionic/md/ltr/light › end label - should not have visual regressions when rendering helper text with wrapping text:
src/components/checkbox/test/bottom-content/checkbox.e2e.ts#L132
4) [Mobile Chrome] › src/components/checkbox/test/bottom-content/checkbox.e2e.ts:121:11 › checkbox: helper text rendering - ionic/md/ltr/light › end label - should not have visual regressions when rendering helper text with wrapping text
Error: expect(locator).toHaveScreenshot(expected) failed
Locator: locator('ion-checkbox')
Expected an image 393px by 64px, received 393px by 72px. 3089 pixels (ratio 0.11 of all image pixels) are different.
Snapshot: checkbox-helper-text-end-wrapping-ionic-md-ltr-light.png
Call log:
- Expect "toHaveScreenshot(checkbox-helper-text-end-wrapping-ionic-md-ltr-light.png)" with timeout 5000ms
- verifying given screenshot expectation
- waiting for locator('ion-checkbox')
- locator resolved to <ion-checkbox tabindex="0" role="checkbox" aria-checked="false" label-placement="end" aria-labelledby="ion-cb-0-lbl" aria-describedby="ion-cb-0-helper-text" class="ionic ion-focusable interactive checkbox-label-placement-end checkbox-shape-soft hydrated" helper-text="Helper text helper text helper text helper text helper text helper text helper text helper text helper text">…</ion-checkbox>
- taking element screenshot
- disabled all CSS animations
- waiting for fonts to load...
- fonts loaded
- attempting scroll into view action
- waiting for element to be stable
- Expected an image 393px by 64px, received 393px by 72px. 3089 pixels (ratio 0.11 of all image pixels) are different.
- waiting 100ms before taking screenshot
- waiting for locator('ion-checkbox')
- locator resolved to <ion-checkbox tabindex="0" role="checkbox" aria-checked="false" label-placement="end" aria-labelledby="ion-cb-0-lbl" aria-describedby="ion-cb-0-helper-text" class="ionic ion-focusable interactive checkbox-label-placement-end checkbox-shape-soft hydrated" helper-text="Helper text helper text helper text helper text helper text helper text helper text helper text helper text">…</ion-checkbox>
- taking element screenshot
- disabled all CSS animations
- waiting for fonts to load...
- fonts loaded
- attempting scroll into view action
- waiting for element to be stable
- captured a stable screenshot
- Expected an image 393px by 64px, received 393px by 72px. 3089 pixels (ratio 0.11 of all image pixels) are different.
130 |
131 | const bottomEl = page.locator('ion-checkbox');
> 132 | await expect(bottomEl).toHaveScreenshot(
| ^
133 | screenshot(`checkbox-helper-text${labelPlacement ? `-${labelPlacement}` : ''}-wrapping`)
134 | );
135 | });
at /ionic/src/components/checkbox/test/bottom-content/checkbox.e2e.ts:132:32
|
|
[Mobile Chrome] › src/components/checkbox/test/bottom-content/checkbox.e2e.ts:105:11 › checkbox: helper text rendering - ionic/md/ltr/light › end label - should not have visual regressions when rendering helper text:
src/components/checkbox/test/bottom-content/checkbox.e2e.ts#L116
3) [Mobile Chrome] › src/components/checkbox/test/bottom-content/checkbox.e2e.ts:105:11 › checkbox: helper text rendering - ionic/md/ltr/light › end label - should not have visual regressions when rendering helper text
Retry #2 ───────────────────────────────────────────────────────────────────────────────────────
Error: expect(locator).toHaveScreenshot(expected) failed
Locator: locator('ion-checkbox')
Expected an image 98px by 48px, received 107px by 48px. 393 pixels (ratio 0.08 of all image pixels) are different.
Snapshot: checkbox-helper-text-end-ionic-md-ltr-light.png
Call log:
- Expect "toHaveScreenshot(checkbox-helper-text-end-ionic-md-ltr-light.png)" with timeout 5000ms
- verifying given screenshot expectation
- waiting for locator('ion-checkbox')
- locator resolved to <ion-checkbox tabindex="0" role="checkbox" aria-checked="false" label-placement="end" helper-text="Helper text" aria-labelledby="ion-cb-0-lbl" aria-describedby="ion-cb-0-helper-text" class="ionic ion-focusable interactive checkbox-label-placement-end checkbox-shape-soft hydrated">…</ion-checkbox>
- taking element screenshot
- disabled all CSS animations
- waiting for fonts to load...
- fonts loaded
- attempting scroll into view action
- waiting for element to be stable
- Expected an image 98px by 48px, received 107px by 48px. 393 pixels (ratio 0.08 of all image pixels) are different.
- waiting 100ms before taking screenshot
- waiting for locator('ion-checkbox')
- locator resolved to <ion-checkbox tabindex="0" role="checkbox" aria-checked="false" label-placement="end" helper-text="Helper text" aria-labelledby="ion-cb-0-lbl" aria-describedby="ion-cb-0-helper-text" class="ionic ion-focusable interactive checkbox-label-placement-end checkbox-shape-soft hydrated">…</ion-checkbox>
- taking element screenshot
- disabled all CSS animations
- waiting for fonts to load...
- fonts loaded
- attempting scroll into view action
- waiting for element to be stable
- captured a stable screenshot
- Expected an image 98px by 48px, received 107px by 48px. 393 pixels (ratio 0.08 of all image pixels) are different.
114 |
115 | const bottomEl = page.locator('ion-checkbox');
> 116 | await expect(bottomEl).toHaveScreenshot(
| ^
117 | screenshot(`checkbox-helper-text${labelPlacement ? `-${labelPlacement}` : ''}`)
118 | );
119 | });
at /ionic/src/components/checkbox/test/bottom-content/checkbox.e2e.ts:116:32
|
|
[Mobile Chrome] › src/components/checkbox/test/bottom-content/checkbox.e2e.ts:105:11 › checkbox: helper text rendering - ionic/md/ltr/light › end label - should not have visual regressions when rendering helper text:
src/components/checkbox/test/bottom-content/checkbox.e2e.ts#L116
3) [Mobile Chrome] › src/components/checkbox/test/bottom-content/checkbox.e2e.ts:105:11 › checkbox: helper text rendering - ionic/md/ltr/light › end label - should not have visual regressions when rendering helper text
Retry #1 ───────────────────────────────────────────────────────────────────────────────────────
Error: expect(locator).toHaveScreenshot(expected) failed
Locator: locator('ion-checkbox')
Expected an image 98px by 48px, received 107px by 48px. 393 pixels (ratio 0.08 of all image pixels) are different.
Snapshot: checkbox-helper-text-end-ionic-md-ltr-light.png
Call log:
- Expect "toHaveScreenshot(checkbox-helper-text-end-ionic-md-ltr-light.png)" with timeout 5000ms
- verifying given screenshot expectation
- waiting for locator('ion-checkbox')
- locator resolved to <ion-checkbox tabindex="0" role="checkbox" aria-checked="false" label-placement="end" helper-text="Helper text" aria-labelledby="ion-cb-0-lbl" aria-describedby="ion-cb-0-helper-text" class="ionic ion-focusable interactive checkbox-label-placement-end checkbox-shape-soft hydrated">…</ion-checkbox>
- taking element screenshot
- disabled all CSS animations
- waiting for fonts to load...
- fonts loaded
- attempting scroll into view action
- waiting for element to be stable
- Expected an image 98px by 48px, received 107px by 48px. 393 pixels (ratio 0.08 of all image pixels) are different.
- waiting 100ms before taking screenshot
- waiting for locator('ion-checkbox')
- locator resolved to <ion-checkbox tabindex="0" role="checkbox" aria-checked="false" label-placement="end" helper-text="Helper text" aria-labelledby="ion-cb-0-lbl" aria-describedby="ion-cb-0-helper-text" class="ionic ion-focusable interactive checkbox-label-placement-end checkbox-shape-soft hydrated">…</ion-checkbox>
- taking element screenshot
- disabled all CSS animations
- waiting for fonts to load...
- fonts loaded
- attempting scroll into view action
- waiting for element to be stable
- captured a stable screenshot
- Expected an image 98px by 48px, received 107px by 48px. 393 pixels (ratio 0.08 of all image pixels) are different.
114 |
115 | const bottomEl = page.locator('ion-checkbox');
> 116 | await expect(bottomEl).toHaveScreenshot(
| ^
117 | screenshot(`checkbox-helper-text${labelPlacement ? `-${labelPlacement}` : ''}`)
118 | );
119 | });
at /ionic/src/components/checkbox/test/bottom-content/checkbox.e2e.ts:116:32
|
|
[Mobile Chrome] › src/components/checkbox/test/bottom-content/checkbox.e2e.ts:105:11 › checkbox: helper text rendering - ionic/md/ltr/light › end label - should not have visual regressions when rendering helper text:
src/components/checkbox/test/bottom-content/checkbox.e2e.ts#L116
3) [Mobile Chrome] › src/components/checkbox/test/bottom-content/checkbox.e2e.ts:105:11 › checkbox: helper text rendering - ionic/md/ltr/light › end label - should not have visual regressions when rendering helper text
Error: expect(locator).toHaveScreenshot(expected) failed
Locator: locator('ion-checkbox')
Expected an image 98px by 48px, received 107px by 48px. 393 pixels (ratio 0.08 of all image pixels) are different.
Snapshot: checkbox-helper-text-end-ionic-md-ltr-light.png
Call log:
- Expect "toHaveScreenshot(checkbox-helper-text-end-ionic-md-ltr-light.png)" with timeout 5000ms
- verifying given screenshot expectation
- waiting for locator('ion-checkbox')
- locator resolved to <ion-checkbox tabindex="0" role="checkbox" aria-checked="false" label-placement="end" helper-text="Helper text" aria-labelledby="ion-cb-0-lbl" aria-describedby="ion-cb-0-helper-text" class="ionic ion-focusable interactive checkbox-label-placement-end checkbox-shape-soft hydrated">…</ion-checkbox>
- taking element screenshot
- disabled all CSS animations
- waiting for fonts to load...
- fonts loaded
- attempting scroll into view action
- waiting for element to be stable
- Expected an image 98px by 48px, received 107px by 48px. 393 pixels (ratio 0.08 of all image pixels) are different.
- waiting 100ms before taking screenshot
- waiting for locator('ion-checkbox')
- locator resolved to <ion-checkbox tabindex="0" role="checkbox" aria-checked="false" label-placement="end" helper-text="Helper text" aria-labelledby="ion-cb-0-lbl" aria-describedby="ion-cb-0-helper-text" class="ionic ion-focusable interactive checkbox-label-placement-end checkbox-shape-soft hydrated">…</ion-checkbox>
- taking element screenshot
- disabled all CSS animations
- waiting for fonts to load...
- fonts loaded
- attempting scroll into view action
- waiting for element to be stable
- captured a stable screenshot
- Expected an image 98px by 48px, received 107px by 48px. 393 pixels (ratio 0.08 of all image pixels) are different.
114 |
115 | const bottomEl = page.locator('ion-checkbox');
> 116 | await expect(bottomEl).toHaveScreenshot(
| ^
117 | screenshot(`checkbox-helper-text${labelPlacement ? `-${labelPlacement}` : ''}`)
118 | );
119 | });
at /ionic/src/components/checkbox/test/bottom-content/checkbox.e2e.ts:116:32
|
|
[Mobile Chrome] › src/components/checkbox/test/bottom-content/checkbox.e2e.ts:121:11 › checkbox: helper text rendering - ionic/md/ltr/light › should not have visual regressions when rendering helper text with wrapping text:
src/components/checkbox/test/bottom-content/checkbox.e2e.ts#L132
2) [Mobile Chrome] › src/components/checkbox/test/bottom-content/checkbox.e2e.ts:121:11 › checkbox: helper text rendering - ionic/md/ltr/light › should not have visual regressions when rendering helper text with wrapping text
Retry #2 ───────────────────────────────────────────────────────────────────────────────────────
Error: expect(locator).toHaveScreenshot(expected) failed
Locator: locator('ion-checkbox')
Expected an image 393px by 64px, received 393px by 72px. 3085 pixels (ratio 0.11 of all image pixels) are different.
Snapshot: checkbox-helper-text-wrapping-ionic-md-ltr-light.png
Call log:
- Expect "toHaveScreenshot(checkbox-helper-text-wrapping-ionic-md-ltr-light.png)" with timeout 5000ms
- verifying given screenshot expectation
- waiting for locator('ion-checkbox')
- locator resolved to <ion-checkbox tabindex="0" role="checkbox" aria-checked="false" aria-labelledby="ion-cb-0-lbl" aria-describedby="ion-cb-0-helper-text" class="ionic ion-focusable interactive checkbox-label-placement-start checkbox-shape-soft hydrated" helper-text="Helper text helper text helper text helper text helper text helper text helper text helper text helper text">…</ion-checkbox>
- taking element screenshot
- disabled all CSS animations
- waiting for fonts to load...
- fonts loaded
- attempting scroll into view action
- waiting for element to be stable
- Expected an image 393px by 64px, received 393px by 72px. 3085 pixels (ratio 0.11 of all image pixels) are different.
- waiting 100ms before taking screenshot
- waiting for locator('ion-checkbox')
- locator resolved to <ion-checkbox tabindex="0" role="checkbox" aria-checked="false" aria-labelledby="ion-cb-0-lbl" aria-describedby="ion-cb-0-helper-text" class="ionic ion-focusable interactive checkbox-label-placement-start checkbox-shape-soft hydrated" helper-text="Helper text helper text helper text helper text helper text helper text helper text helper text helper text">…</ion-checkbox>
- taking element screenshot
- disabled all CSS animations
- waiting for fonts to load...
- fonts loaded
- attempting scroll into view action
- waiting for element to be stable
- captured a stable screenshot
- Expected an image 393px by 64px, received 393px by 72px. 3085 pixels (ratio 0.11 of all image pixels) are different.
130 |
131 | const bottomEl = page.locator('ion-checkbox');
> 132 | await expect(bottomEl).toHaveScreenshot(
| ^
133 | screenshot(`checkbox-helper-text${labelPlacement ? `-${labelPlacement}` : ''}-wrapping`)
134 | );
135 | });
at /ionic/src/components/checkbox/test/bottom-content/checkbox.e2e.ts:132:32
|
|
[Mobile Chrome] › src/components/checkbox/test/bottom-content/checkbox.e2e.ts:121:11 › checkbox: helper text rendering - ionic/md/ltr/light › should not have visual regressions when rendering helper text with wrapping text:
src/components/checkbox/test/bottom-content/checkbox.e2e.ts#L132
2) [Mobile Chrome] › src/components/checkbox/test/bottom-content/checkbox.e2e.ts:121:11 › checkbox: helper text rendering - ionic/md/ltr/light › should not have visual regressions when rendering helper text with wrapping text
Retry #1 ───────────────────────────────────────────────────────────────────────────────────────
Error: expect(locator).toHaveScreenshot(expected) failed
Locator: locator('ion-checkbox')
Expected an image 393px by 64px, received 393px by 72px. 3085 pixels (ratio 0.11 of all image pixels) are different.
Snapshot: checkbox-helper-text-wrapping-ionic-md-ltr-light.png
Call log:
- Expect "toHaveScreenshot(checkbox-helper-text-wrapping-ionic-md-ltr-light.png)" with timeout 5000ms
- verifying given screenshot expectation
- waiting for locator('ion-checkbox')
- locator resolved to <ion-checkbox tabindex="0" role="checkbox" aria-checked="false" aria-labelledby="ion-cb-0-lbl" aria-describedby="ion-cb-0-helper-text" class="ionic ion-focusable interactive checkbox-label-placement-start checkbox-shape-soft hydrated" helper-text="Helper text helper text helper text helper text helper text helper text helper text helper text helper text">…</ion-checkbox>
- taking element screenshot
- disabled all CSS animations
- waiting for fonts to load...
- fonts loaded
- attempting scroll into view action
- waiting for element to be stable
- Expected an image 393px by 64px, received 393px by 72px. 3085 pixels (ratio 0.11 of all image pixels) are different.
- waiting 100ms before taking screenshot
- waiting for locator('ion-checkbox')
- locator resolved to <ion-checkbox tabindex="0" role="checkbox" aria-checked="false" aria-labelledby="ion-cb-0-lbl" aria-describedby="ion-cb-0-helper-text" class="ionic ion-focusable interactive checkbox-label-placement-start checkbox-shape-soft hydrated" helper-text="Helper text helper text helper text helper text helper text helper text helper text helper text helper text">…</ion-checkbox>
- taking element screenshot
- disabled all CSS animations
- waiting for fonts to load...
- fonts loaded
- attempting scroll into view action
- waiting for element to be stable
- captured a stable screenshot
- Expected an image 393px by 64px, received 393px by 72px. 3085 pixels (ratio 0.11 of all image pixels) are different.
130 |
131 | const bottomEl = page.locator('ion-checkbox');
> 132 | await expect(bottomEl).toHaveScreenshot(
| ^
133 | screenshot(`checkbox-helper-text${labelPlacement ? `-${labelPlacement}` : ''}-wrapping`)
134 | );
135 | });
at /ionic/src/components/checkbox/test/bottom-content/checkbox.e2e.ts:132:32
|
|
[Mobile Chrome] › src/components/checkbox/test/bottom-content/checkbox.e2e.ts:121:11 › checkbox: helper text rendering - ionic/md/ltr/light › should not have visual regressions when rendering helper text with wrapping text:
src/components/checkbox/test/bottom-content/checkbox.e2e.ts#L132
2) [Mobile Chrome] › src/components/checkbox/test/bottom-content/checkbox.e2e.ts:121:11 › checkbox: helper text rendering - ionic/md/ltr/light › should not have visual regressions when rendering helper text with wrapping text
Error: expect(locator).toHaveScreenshot(expected) failed
Locator: locator('ion-checkbox')
Expected an image 393px by 64px, received 393px by 72px. 3085 pixels (ratio 0.11 of all image pixels) are different.
Snapshot: checkbox-helper-text-wrapping-ionic-md-ltr-light.png
Call log:
- Expect "toHaveScreenshot(checkbox-helper-text-wrapping-ionic-md-ltr-light.png)" with timeout 5000ms
- verifying given screenshot expectation
- waiting for locator('ion-checkbox')
- locator resolved to <ion-checkbox tabindex="0" role="checkbox" aria-checked="false" aria-labelledby="ion-cb-0-lbl" aria-describedby="ion-cb-0-helper-text" class="ionic ion-focusable interactive checkbox-label-placement-start checkbox-shape-soft hydrated" helper-text="Helper text helper text helper text helper text helper text helper text helper text helper text helper text">…</ion-checkbox>
- taking element screenshot
- disabled all CSS animations
- waiting for fonts to load...
- fonts loaded
- attempting scroll into view action
- waiting for element to be stable
- Expected an image 393px by 64px, received 393px by 72px. 3085 pixels (ratio 0.11 of all image pixels) are different.
- waiting 100ms before taking screenshot
- waiting for locator('ion-checkbox')
- locator resolved to <ion-checkbox tabindex="0" role="checkbox" aria-checked="false" aria-labelledby="ion-cb-0-lbl" aria-describedby="ion-cb-0-helper-text" class="ionic ion-focusable interactive checkbox-label-placement-start checkbox-shape-soft hydrated" helper-text="Helper text helper text helper text helper text helper text helper text helper text helper text helper text">…</ion-checkbox>
- taking element screenshot
- disabled all CSS animations
- waiting for fonts to load...
- fonts loaded
- attempting scroll into view action
- waiting for element to be stable
- captured a stable screenshot
- Expected an image 393px by 64px, received 393px by 72px. 3085 pixels (ratio 0.11 of all image pixels) are different.
130 |
131 | const bottomEl = page.locator('ion-checkbox');
> 132 | await expect(bottomEl).toHaveScreenshot(
| ^
133 | screenshot(`checkbox-helper-text${labelPlacement ? `-${labelPlacement}` : ''}-wrapping`)
134 | );
135 | });
at /ionic/src/components/checkbox/test/bottom-content/checkbox.e2e.ts:132:32
|
|
[Mobile Chrome] › src/components/checkbox/test/bottom-content/checkbox.e2e.ts:105:11 › checkbox: helper text rendering - ionic/md/ltr/light › should not have visual regressions when rendering helper text:
src/components/checkbox/test/bottom-content/checkbox.e2e.ts#L116
1) [Mobile Chrome] › src/components/checkbox/test/bottom-content/checkbox.e2e.ts:105:11 › checkbox: helper text rendering - ionic/md/ltr/light › should not have visual regressions when rendering helper text
Retry #2 ───────────────────────────────────────────────────────────────────────────────────────
Error: expect(locator).toHaveScreenshot(expected) failed
Locator: locator('ion-checkbox')
Expected an image 98px by 48px, received 107px by 48px. 491 pixels (ratio 0.10 of all image pixels) are different.
Snapshot: checkbox-helper-text-ionic-md-ltr-light.png
Call log:
- Expect "toHaveScreenshot(checkbox-helper-text-ionic-md-ltr-light.png)" with timeout 5000ms
- verifying given screenshot expectation
- waiting for locator('ion-checkbox')
- locator resolved to <ion-checkbox tabindex="0" role="checkbox" aria-checked="false" helper-text="Helper text" aria-labelledby="ion-cb-0-lbl" aria-describedby="ion-cb-0-helper-text" class="ionic ion-focusable interactive checkbox-label-placement-start checkbox-shape-soft hydrated">…</ion-checkbox>
- taking element screenshot
- disabled all CSS animations
- waiting for fonts to load...
- fonts loaded
- attempting scroll into view action
- waiting for element to be stable
- Expected an image 98px by 48px, received 107px by 48px. 491 pixels (ratio 0.10 of all image pixels) are different.
- waiting 100ms before taking screenshot
- waiting for locator('ion-checkbox')
- locator resolved to <ion-checkbox tabindex="0" role="checkbox" aria-checked="false" helper-text="Helper text" aria-labelledby="ion-cb-0-lbl" aria-describedby="ion-cb-0-helper-text" class="ionic ion-focusable interactive checkbox-label-placement-start checkbox-shape-soft hydrated">…</ion-checkbox>
- taking element screenshot
- disabled all CSS animations
- waiting for fonts to load...
- fonts loaded
- attempting scroll into view action
- waiting for element to be stable
- captured a stable screenshot
- Expected an image 98px by 48px, received 107px by 48px. 491 pixels (ratio 0.10 of all image pixels) are different.
114 |
115 | const bottomEl = page.locator('ion-checkbox');
> 116 | await expect(bottomEl).toHaveScreenshot(
| ^
117 | screenshot(`checkbox-helper-text${labelPlacement ? `-${labelPlacement}` : ''}`)
118 | );
119 | });
at /ionic/src/components/checkbox/test/bottom-content/checkbox.e2e.ts:116:32
|
|
[Mobile Chrome] › src/components/checkbox/test/bottom-content/checkbox.e2e.ts:105:11 › checkbox: helper text rendering - ionic/md/ltr/light › should not have visual regressions when rendering helper text:
src/components/checkbox/test/bottom-content/checkbox.e2e.ts#L116
1) [Mobile Chrome] › src/components/checkbox/test/bottom-content/checkbox.e2e.ts:105:11 › checkbox: helper text rendering - ionic/md/ltr/light › should not have visual regressions when rendering helper text
Retry #1 ───────────────────────────────────────────────────────────────────────────────────────
Error: expect(locator).toHaveScreenshot(expected) failed
Locator: locator('ion-checkbox')
Expected an image 98px by 48px, received 107px by 48px. 491 pixels (ratio 0.10 of all image pixels) are different.
Snapshot: checkbox-helper-text-ionic-md-ltr-light.png
Call log:
- Expect "toHaveScreenshot(checkbox-helper-text-ionic-md-ltr-light.png)" with timeout 5000ms
- verifying given screenshot expectation
- waiting for locator('ion-checkbox')
- locator resolved to <ion-checkbox tabindex="0" role="checkbox" aria-checked="false" helper-text="Helper text" aria-labelledby="ion-cb-0-lbl" aria-describedby="ion-cb-0-helper-text" class="ionic ion-focusable interactive checkbox-label-placement-start checkbox-shape-soft hydrated">…</ion-checkbox>
- taking element screenshot
- disabled all CSS animations
- waiting for fonts to load...
- fonts loaded
- attempting scroll into view action
- waiting for element to be stable
- Expected an image 98px by 48px, received 107px by 48px. 491 pixels (ratio 0.10 of all image pixels) are different.
- waiting 100ms before taking screenshot
- waiting for locator('ion-checkbox')
- locator resolved to <ion-checkbox tabindex="0" role="checkbox" aria-checked="false" helper-text="Helper text" aria-labelledby="ion-cb-0-lbl" aria-describedby="ion-cb-0-helper-text" class="ionic ion-focusable interactive checkbox-label-placement-start checkbox-shape-soft hydrated">…</ion-checkbox>
- taking element screenshot
- disabled all CSS animations
- waiting for fonts to load...
- fonts loaded
- attempting scroll into view action
- waiting for element to be stable
- captured a stable screenshot
- Expected an image 98px by 48px, received 107px by 48px. 491 pixels (ratio 0.10 of all image pixels) are different.
114 |
115 | const bottomEl = page.locator('ion-checkbox');
> 116 | await expect(bottomEl).toHaveScreenshot(
| ^
117 | screenshot(`checkbox-helper-text${labelPlacement ? `-${labelPlacement}` : ''}`)
118 | );
119 | });
at /ionic/src/components/checkbox/test/bottom-content/checkbox.e2e.ts:116:32
|
|
[Mobile Chrome] › src/components/checkbox/test/bottom-content/checkbox.e2e.ts:105:11 › checkbox: helper text rendering - ionic/md/ltr/light › should not have visual regressions when rendering helper text:
src/components/checkbox/test/bottom-content/checkbox.e2e.ts#L116
1) [Mobile Chrome] › src/components/checkbox/test/bottom-content/checkbox.e2e.ts:105:11 › checkbox: helper text rendering - ionic/md/ltr/light › should not have visual regressions when rendering helper text
Error: expect(locator).toHaveScreenshot(expected) failed
Locator: locator('ion-checkbox')
Expected an image 98px by 48px, received 107px by 48px. 491 pixels (ratio 0.10 of all image pixels) are different.
Snapshot: checkbox-helper-text-ionic-md-ltr-light.png
Call log:
- Expect "toHaveScreenshot(checkbox-helper-text-ionic-md-ltr-light.png)" with timeout 5000ms
- verifying given screenshot expectation
- waiting for locator('ion-checkbox')
- locator resolved to <ion-checkbox tabindex="0" role="checkbox" aria-checked="false" helper-text="Helper text" aria-labelledby="ion-cb-0-lbl" aria-describedby="ion-cb-0-helper-text" class="ionic ion-focusable interactive checkbox-label-placement-start checkbox-shape-soft hydrated">…</ion-checkbox>
- taking element screenshot
- disabled all CSS animations
- waiting for fonts to load...
- fonts loaded
- attempting scroll into view action
- waiting for element to be stable
- Expected an image 98px by 48px, received 107px by 48px. 491 pixels (ratio 0.10 of all image pixels) are different.
- waiting 100ms before taking screenshot
- waiting for locator('ion-checkbox')
- locator resolved to <ion-checkbox tabindex="0" role="checkbox" aria-checked="false" helper-text="Helper text" aria-labelledby="ion-cb-0-lbl" aria-describedby="ion-cb-0-helper-text" class="ionic ion-focusable interactive checkbox-label-placement-start checkbox-shape-soft hydrated">…</ion-checkbox>
- taking element screenshot
- disabled all CSS animations
- waiting for fonts to load...
- fonts loaded
- attempting scroll into view action
- waiting for element to be stable
- captured a stable screenshot
- Expected an image 98px by 48px, received 107px by 48px. 491 pixels (ratio 0.10 of all image pixels) are different.
114 |
115 | const bottomEl = page.locator('ion-checkbox');
> 116 | await expect(bottomEl).toHaveScreenshot(
| ^
117 | screenshot(`checkbox-helper-text${labelPlacement ? `-${labelPlacement}` : ''}`)
118 | );
119 | });
at /ionic/src/components/checkbox/test/bottom-content/checkbox.e2e.ts:116:32
|
|
test-core-screenshot (9, 20)
The strategy configuration was canceled because "test-core-screenshot._8_20" failed
|
|
test-core-screenshot (9, 20)
The operation was canceled.
|
|
test-core-screenshot (2, 20)
The strategy configuration was canceled because "test-core-screenshot._8_20" failed
|
|
test-core-screenshot (2, 20)
Process completed with exit code 12.
|
|
test-core-screenshot (2, 20)
The operation was canceled.
|
|
test-core-screenshot (5, 20)
The strategy configuration was canceled because "test-core-screenshot._8_20" failed
|
|
test-core-screenshot (5, 20)
Process completed with exit code 12.
|
|
test-core-screenshot (5, 20)
The operation was canceled.
|
|
test-core-screenshot (17, 20)
The strategy configuration was canceled because "test-core-screenshot._8_20" failed
|
|
test-core-screenshot (17, 20)
Process completed with exit code 12.
|
|
test-core-screenshot (17, 20)
The operation was canceled.
|
|
test-core-screenshot (3, 20)
The strategy configuration was canceled because "test-core-screenshot._8_20" failed
|
|
test-core-screenshot (3, 20)
Process completed with exit code 12.
|
|
test-core-screenshot (3, 20)
The operation was canceled.
|
|
test-core-screenshot (19, 20)
The strategy configuration was canceled because "test-core-screenshot._8_20" failed
|
|
test-core-screenshot (19, 20)
Process completed with exit code 12.
|
|
test-core-screenshot (19, 20)
The operation was canceled.
|
|
test-core-screenshot (11, 20)
The strategy configuration was canceled because "test-core-screenshot._8_20" failed
|
|
test-core-screenshot (11, 20)
Process completed with exit code 12.
|
|
test-core-screenshot (11, 20)
The operation was canceled.
|
|
test-core-screenshot (13, 20)
The strategy configuration was canceled because "test-core-screenshot._8_20" failed
|
|
test-core-screenshot (13, 20)
Process completed with exit code 12.
|
|
test-core-screenshot (13, 20)
The operation was canceled.
|
|
test-core-screenshot (1, 20)
The strategy configuration was canceled because "test-core-screenshot._8_20" failed
|
|
test-core-screenshot (1, 20)
Process completed with exit code 12.
|
|
test-core-screenshot (1, 20)
The operation was canceled.
|
|
test-core-screenshot (4, 20)
The strategy configuration was canceled because "test-core-screenshot._8_20" failed
|
|
test-core-screenshot (4, 20)
Process completed with exit code 12.
|
|
test-core-screenshot (4, 20)
The operation was canceled.
|
|
test-core-screenshot (14, 20)
The strategy configuration was canceled because "test-core-screenshot._8_20" failed
|
|
test-core-screenshot (14, 20)
Process completed with exit code 12.
|
|
test-core-screenshot (14, 20)
The operation was canceled.
|
|
test-core-screenshot (16, 20)
The strategy configuration was canceled because "test-core-screenshot._8_20" failed
|
|
test-core-screenshot (16, 20)
Process completed with exit code 12.
|
|
test-core-screenshot (16, 20)
The operation was canceled.
|
|
test-core-screenshot (15, 20)
The strategy configuration was canceled because "test-core-screenshot._8_20" failed
|
|
test-core-screenshot (15, 20)
Process completed with exit code 12.
|
|
test-core-screenshot (18, 20)
The strategy configuration was canceled because "test-core-screenshot._8_20" failed
|
|
test-core-screenshot (15, 20)
The operation was canceled.
|
|
test-core-screenshot (18, 20)
Process completed with exit code 12.
|
|
test-core-screenshot (18, 20)
The operation was canceled.
|
|
test-core-screenshot (6, 20)
The strategy configuration was canceled because "test-core-screenshot._8_20" failed
|
|
test-core-screenshot (6, 20)
Process completed with exit code 12.
|
|
test-core-screenshot (6, 20)
The operation was canceled.
|
|
verify-screenshots
Process completed with exit code 1.
|
|
🎭 Playwright Run Summary
360 skipped
277 passed (2.2m)
|
|
🎭 Playwright Run Summary
368 skipped
308 passed (3.4m)
|
|
🎭 Playwright Run Summary
2 skipped
669 passed (3.5m)
|
|
🎭 Playwright Run Summary
1 skipped
676 passed (3.9m)
|
|
🎭 Playwright Run Summary
8 failed
[Mobile Chrome] › src/components/checkbox/test/bottom-content/checkbox.e2e.ts:105:11 › checkbox: helper text rendering - ionic/md/ltr/light › should not have visual regressions when rendering helper text
[Mobile Chrome] › src/components/checkbox/test/bottom-content/checkbox.e2e.ts:121:11 › checkbox: helper text rendering - ionic/md/ltr/light › should not have visual regressions when rendering helper text with wrapping text
[Mobile Chrome] › src/components/checkbox/test/bottom-content/checkbox.e2e.ts:105:11 › checkbox: helper text rendering - ionic/md/ltr/light › end label - should not have visual regressions when rendering helper text
[Mobile Chrome] › src/components/checkbox/test/bottom-content/checkbox.e2e.ts:121:11 › checkbox: helper text rendering - ionic/md/ltr/light › end label - should not have visual regressions when rendering helper text with wrapping text
[Mobile Chrome] › src/components/checkbox/test/bottom-content/checkbox.e2e.ts:105:11 › checkbox: helper text rendering - ionic/md/ltr/light › stacked label - should not have visual regressions when rendering helper text
[Mobile Chrome] › src/components/checkbox/test/bottom-content/checkbox.e2e.ts:121:11 › checkbox: helper text rendering - ionic/md/ltr/light › stacked label - should not have visual regressions when rendering helper text with wrapping text
[Mobile Chrome] › src/components/checkbox/test/bottom-content/checkbox.e2e.ts:140:9 › checkbox: error text rendering - ionic/md/ltr/light › should not have visual regressions when rendering error text
[Mobile Chrome] › src/components/checkbox/test/bottom-content/checkbox.e2e.ts:149:9 › checkbox: error text rendering - ionic/md/ltr/light › should not have visual regressions when rendering error text with a stacked label
8 skipped
680 passed (4.2m)
|
|
🎭 Playwright Run Summary
8 skipped
663 passed (4.3m)
|
Artifacts
Produced during runtime
| Name | Size | Digest | |
|---|---|---|---|
|
ionic-angular
|
805 KB |
sha256:baa73c8e8cda7c577688bf7b0cac3b3e8a664da8b80cecdf1cbff0aa9172c133
|
|
|
ionic-angular-server
|
8.55 KB |
sha256:5e928f5f7c1fcca95221389303fc1ed842bbdc780e3dadc176a4c37f8a0c116d
|
|
|
ionic-core
|
5.15 MB |
sha256:d9d1527fa46cfd07bd47f4ff922780e112ffa3bbd9a6f651e57bc172def7d2c6
|
|
|
ionic-react
|
343 KB |
sha256:474e2e59b9d133817da5feaaf8de778049da44a945de78fa434768c6a0a9d0cc
|
|
|
ionic-react-router
|
27.9 KB |
sha256:dfe9da37da02f3522f1573c0a65a788f79af57a5eee39165961b6a3ec86cf6c1
|
|
|
ionic-vue
|
374 KB |
sha256:7859369879c0cfed8458c98e797c400f20a98929a939335ffec406ed61d17de3
|
|
|
ionic-vue-router
|
17.1 KB |
sha256:a5d2f2b76a13bb2d145f8f1bc66783d5143bf80a6e907cea25009c72f149aae3
|
|
|
test-results-10-20
|
460 KB |
sha256:6897814d0deb8d103fcbc7735ade6023070cc7bf073a62549a22b1835aa34c96
|
|
|
test-results-12-20
|
499 KB |
sha256:4fcecbb2e62a1eae0f82791c5b2b59d1b906e6c254c0b3e1746cac35768ecfc4
|
|
|
test-results-20-20
|
360 KB |
sha256:67fcb11f9335a582f6b7beb5c487677f391a7ca72c207e742ead27bafc988d83
|
|
|
test-results-7-20
|
376 KB |
sha256:e4d938a29b3b9a4537fc57940dec92fc62398667dafe9984bd36ec52f9109045
|
|
|
test-results-8-20
|
9.92 MB |
sha256:356eefd27817794a827ca5685cb892c5056a8e61f0b98d7d87b46f4386f972c6
|
|
|
test-results-9-20
|
503 KB |
sha256:7b154365519d97155305407f8606d8878de82e2aa6c50e4364d5dd025f28a680
|
|