4) [Mobile Safari] › src/components/toggle/test/bottom-content/toggle.e2e.ts:131:9 › toggle: error text rendering - ionic/md/ltr/light › should not have visual regressions when rendering error text Error: expect(locator).toHaveScreenshot(expected) failed Locator: locator('ion-toggle') Expected an image 390px by 48px, received 117px by 48px. 1104 pixels (ratio 0.06 of all image pixels) are different. Snapshot: toggle-error-text-ionic-md-ltr-light.png Call log: - Expect "toHaveScreenshot(toggle-error-text-ionic-md-ltr-light.png)" with timeout 5000ms - verifying given screenshot expectation - waiting for locator('ion-toggle') - locator resolved to <ion-toggle tabindex="0" role="switch" aria-invalid="true" aria-checked="false" error-text="Error text" aria-labelledby="ion-tg-0-lbl" aria-describedby="ion-tg-0-error-text" class="ion-invalid ion-touched ionic toggle-label-placement-start toggle-ltr ion-activatable ion-focusable hydrated">…</ion-toggle> - 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 390px by 48px, received 117px by 48px. 1104 pixels (ratio 0.06 of all image pixels) are different. - waiting 100ms before taking screenshot - waiting for locator('ion-toggle') - locator resolved to <ion-toggle tabindex="0" role="switch" aria-invalid="true" aria-checked="false" error-text="Error text" aria-labelledby="ion-tg-0-lbl" aria-describedby="ion-tg-0-error-text" class="ion-invalid ion-touched ionic toggle-label-placement-start toggle-ltr ion-activatable ion-focusable hydrated">…</ion-toggle> - 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 390px by 48px, received 117px by 48px. 1104 pixels (ratio 0.06 of all image pixels) are different. 136 | 137 | const bottomEl = page.locator('ion-toggle'); > 138 | await expect(bottomEl).toHaveScreenshot(screenshot(`toggle-error-text`)); | ^ 139 | }); 140 | test('should not have visual regressions when rendering error text with a stacked label', async ({ page }) => { 141 | await page.setContent( at /ionic/src/components/toggle/test/bottom-content/toggle.e2e.ts:138:30

[Mobile Safari] › src/components/toggle/test/bottom-content/toggle.e2e.ts:96:11 › toggle: helper text rendering - ionic/md/ltr/light › stacked label - should not have visual regressions when rendering helper text: src/components/toggle/test/bottom-content/toggle.e2e.ts#L107

3) [Mobile Safari] › src/components/toggle/test/bottom-content/toggle.e2e.ts:96:11 › toggle: helper text rendering - ionic/md/ltr/light › stacked label - should not have visual regressions when rendering helper text Retry #2 ─────────────────────────────────────────────────────────────────────────────────────── Error: expect(locator).toHaveScreenshot(expected) failed Locator: locator('ion-toggle') Expected an image 390px by 48px, received 128px by 48px. 1107 pixels (ratio 0.06 of all image pixels) are different. Snapshot: toggle-helper-text-stacked-ionic-md-ltr-light.png Call log: - Expect "toHaveScreenshot(toggle-helper-text-stacked-ionic-md-ltr-light.png)" with timeout 5000ms - verifying given screenshot expectation - waiting for locator('ion-toggle') - locator resolved to <ion-toggle tabindex="0" role="switch" aria-checked="false" label-placement="stacked" helper-text="Helper text" aria-labelledby="ion-tg-0-lbl" aria-describedby="ion-tg-0-helper-text" class="ionic toggle-label-placement-stacked toggle-ltr ion-activatable ion-focusable hydrated">…</ion-toggle> - 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 390px by 48px, received 128px by 48px. 1107 pixels (ratio 0.06 of all image pixels) are different. - waiting 100ms before taking screenshot - waiting for locator('ion-toggle') - locator resolved to <ion-toggle tabindex="0" role="switch" aria-checked="false" label-placement="stacked" helper-text="Helper text" aria-labelledby="ion-tg-0-lbl" aria-describedby="ion-tg-0-helper-text" class="ionic toggle-label-placement-stacked toggle-ltr ion-activatable ion-focusable hydrated">…</ion-toggle> - 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 390px by 48px, received 128px by 48px. 1107 pixels (ratio 0.06 of all image pixels) are different. 105 | 106 | const bottomEl = page.locator('ion-toggle'); > 107 | await expect(bottomEl).toHaveScreenshot( | ^ 108 | screenshot(`toggle-helper-text${labelPlacement ? `-${labelPlacement}` : ''}`) 109 | ); 110 | }); at /ionic/src/components/toggle/test/bottom-content/toggle.e2e.ts:107:32

3) [Mobile Safari] › src/components/toggle/test/bottom-content/toggle.e2e.ts:96:11 › toggle: helper text rendering - ionic/md/ltr/light › stacked label - should not have visual regressions when rendering helper text Retry #1 ─────────────────────────────────────────────────────────────────────────────────────── Error: expect(locator).toHaveScreenshot(expected) failed Locator: locator('ion-toggle') Expected an image 390px by 48px, received 128px by 48px. 1107 pixels (ratio 0.06 of all image pixels) are different. Snapshot: toggle-helper-text-stacked-ionic-md-ltr-light.png Call log: - Expect "toHaveScreenshot(toggle-helper-text-stacked-ionic-md-ltr-light.png)" with timeout 5000ms - verifying given screenshot expectation - waiting for locator('ion-toggle') - locator resolved to <ion-toggle tabindex="0" role="switch" aria-checked="false" label-placement="stacked" helper-text="Helper text" aria-labelledby="ion-tg-0-lbl" aria-describedby="ion-tg-0-helper-text" class="ionic toggle-label-placement-stacked toggle-ltr ion-activatable ion-focusable hydrated">…</ion-toggle> - 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 390px by 48px, received 128px by 48px. 1107 pixels (ratio 0.06 of all image pixels) are different. - waiting 100ms before taking screenshot - waiting for locator('ion-toggle') - locator resolved to <ion-toggle tabindex="0" role="switch" aria-checked="false" label-placement="stacked" helper-text="Helper text" aria-labelledby="ion-tg-0-lbl" aria-describedby="ion-tg-0-helper-text" class="ionic toggle-label-placement-stacked toggle-ltr ion-activatable ion-focusable hydrated">…</ion-toggle> - 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 390px by 48px, received 128px by 48px. 1107 pixels (ratio 0.06 of all image pixels) are different. 105 | 106 | const bottomEl = page.locator('ion-toggle'); > 107 | await expect(bottomEl).toHaveScreenshot( | ^ 108 | screenshot(`toggle-helper-text${labelPlacement ? `-${labelPlacement}` : ''}`) 109 | ); 110 | }); at /ionic/src/components/toggle/test/bottom-content/toggle.e2e.ts:107:32

3) [Mobile Safari] › src/components/toggle/test/bottom-content/toggle.e2e.ts:96:11 › toggle: helper text rendering - ionic/md/ltr/light › stacked label - should not have visual regressions when rendering helper text Error: expect(locator).toHaveScreenshot(expected) failed Locator: locator('ion-toggle') Expected an image 390px by 48px, received 128px by 48px. 1107 pixels (ratio 0.06 of all image pixels) are different. Snapshot: toggle-helper-text-stacked-ionic-md-ltr-light.png Call log: - Expect "toHaveScreenshot(toggle-helper-text-stacked-ionic-md-ltr-light.png)" with timeout 5000ms - verifying given screenshot expectation - waiting for locator('ion-toggle') - locator resolved to <ion-toggle tabindex="0" role="switch" aria-checked="false" label-placement="stacked" helper-text="Helper text" aria-labelledby="ion-tg-0-lbl" aria-describedby="ion-tg-0-helper-text" class="ionic toggle-label-placement-stacked toggle-ltr ion-activatable ion-focusable hydrated">…</ion-toggle> - 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 390px by 48px, received 128px by 48px. 1107 pixels (ratio 0.06 of all image pixels) are different. - waiting 100ms before taking screenshot - waiting for locator('ion-toggle') - locator resolved to <ion-toggle tabindex="0" role="switch" aria-checked="false" label-placement="stacked" helper-text="Helper text" aria-labelledby="ion-tg-0-lbl" aria-describedby="ion-tg-0-helper-text" class="ionic toggle-label-placement-stacked toggle-ltr ion-activatable ion-focusable hydrated">…</ion-toggle> - 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 390px by 48px, received 128px by 48px. 1107 pixels (ratio 0.06 of all image pixels) are different. 105 | 106 | const bottomEl = page.locator('ion-toggle'); > 107 | await expect(bottomEl).toHaveScreenshot( | ^ 108 | screenshot(`toggle-helper-text${labelPlacement ? `-${labelPlacement}` : ''}`) 109 | ); 110 | }); at /ionic/src/components/toggle/test/bottom-content/toggle.e2e.ts:107:32

[Mobile Safari] › src/components/toggle/test/bottom-content/toggle.e2e.ts:96:11 › toggle: helper text rendering - ionic/md/ltr/light › end label - should not have visual regressions when rendering helper text: src/components/toggle/test/bottom-content/toggle.e2e.ts#L107

2) [Mobile Safari] › src/components/toggle/test/bottom-content/toggle.e2e.ts:96:11 › toggle: 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-toggle') Expected an image 390px by 48px, received 128px by 48px. Snapshot: toggle-helper-text-end-ionic-md-ltr-light.png Call log: - Expect "toHaveScreenshot(toggle-helper-text-end-ionic-md-ltr-light.png)" with timeout 5000ms - verifying given screenshot expectation - waiting for locator('ion-toggle') - locator resolved to <ion-toggle tabindex="0" role="switch" aria-checked="false" label-placement="end" helper-text="Helper text" aria-labelledby="ion-tg-0-lbl" aria-describedby="ion-tg-0-helper-text" class="ionic toggle-label-placement-end toggle-ltr ion-activatable ion-focusable hydrated">…</ion-toggle> - 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 390px by 48px, received 128px by 48px. - waiting 100ms before taking screenshot - waiting for locator('ion-toggle') - locator resolved to <ion-toggle tabindex="0" role="switch" aria-checked="false" label-placement="end" helper-text="Helper text" aria-labelledby="ion-tg-0-lbl" aria-describedby="ion-tg-0-helper-text" class="ionic toggle-label-placement-end toggle-ltr ion-activatable ion-focusable hydrated">…</ion-toggle> - 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 390px by 48px, received 128px by 48px. 105 | 106 | const bottomEl = page.locator('ion-toggle'); > 107 | await expect(bottomEl).toHaveScreenshot( | ^ 108 | screenshot(`toggle-helper-text${labelPlacement ? `-${labelPlacement}` : ''}`) 109 | ); 110 | }); at /ionic/src/components/toggle/test/bottom-content/toggle.e2e.ts:107:32

2) [Mobile Safari] › src/components/toggle/test/bottom-content/toggle.e2e.ts:96:11 › toggle: 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-toggle') Expected an image 390px by 48px, received 128px by 48px. Snapshot: toggle-helper-text-end-ionic-md-ltr-light.png Call log: - Expect "toHaveScreenshot(toggle-helper-text-end-ionic-md-ltr-light.png)" with timeout 5000ms - verifying given screenshot expectation - waiting for locator('ion-toggle') - locator resolved to <ion-toggle tabindex="0" role="switch" aria-checked="false" label-placement="end" helper-text="Helper text" aria-labelledby="ion-tg-0-lbl" aria-describedby="ion-tg-0-helper-text" class="ionic toggle-label-placement-end toggle-ltr ion-activatable ion-focusable hydrated">…</ion-toggle> - 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 390px by 48px, received 128px by 48px. - waiting 100ms before taking screenshot - waiting for locator('ion-toggle') - locator resolved to <ion-toggle tabindex="0" role="switch" aria-checked="false" label-placement="end" helper-text="Helper text" aria-labelledby="ion-tg-0-lbl" aria-describedby="ion-tg-0-helper-text" class="ionic toggle-label-placement-end toggle-ltr ion-activatable ion-focusable hydrated">…</ion-toggle> - 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 390px by 48px, received 128px by 48px. 105 | 106 | const bottomEl = page.locator('ion-toggle'); > 107 | await expect(bottomEl).toHaveScreenshot( | ^ 108 | screenshot(`toggle-helper-text${labelPlacement ? `-${labelPlacement}` : ''}`) 109 | ); 110 | }); at /ionic/src/components/toggle/test/bottom-content/toggle.e2e.ts:107:32

2) [Mobile Safari] › src/components/toggle/test/bottom-content/toggle.e2e.ts:96:11 › toggle: 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-toggle') Expected an image 390px by 48px, received 128px by 48px. Snapshot: toggle-helper-text-end-ionic-md-ltr-light.png Call log: - Expect "toHaveScreenshot(toggle-helper-text-end-ionic-md-ltr-light.png)" with timeout 5000ms - verifying given screenshot expectation - waiting for locator('ion-toggle') - locator resolved to <ion-toggle tabindex="0" role="switch" aria-checked="false" label-placement="end" helper-text="Helper text" aria-labelledby="ion-tg-0-lbl" aria-describedby="ion-tg-0-helper-text" class="ionic toggle-label-placement-end toggle-ltr ion-activatable ion-focusable hydrated">…</ion-toggle> - 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 390px by 48px, received 128px by 48px. - waiting 100ms before taking screenshot - waiting for locator('ion-toggle') - locator resolved to <ion-toggle tabindex="0" role="switch" aria-checked="false" label-placement="end" helper-text="Helper text" aria-labelledby="ion-tg-0-lbl" aria-describedby="ion-tg-0-helper-text" class="ionic toggle-label-placement-end toggle-ltr ion-activatable ion-focusable hydrated">…</ion-toggle> - 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 390px by 48px, received 128px by 48px. 105 | 106 | const bottomEl = page.locator('ion-toggle'); > 107 | await expect(bottomEl).toHaveScreenshot( | ^ 108 | screenshot(`toggle-helper-text${labelPlacement ? `-${labelPlacement}` : ''}`) 109 | ); 110 | }); at /ionic/src/components/toggle/test/bottom-content/toggle.e2e.ts:107:32

[Mobile Safari] › src/components/toggle/test/bottom-content/toggle.e2e.ts:96:11 › toggle: helper text rendering - ionic/md/ltr/light › should not have visual regressions when rendering helper text: src/components/toggle/test/bottom-content/toggle.e2e.ts#L107

1) [Mobile Safari] › src/components/toggle/test/bottom-content/toggle.e2e.ts:96:11 › toggle: 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-toggle') Expected an image 390px by 48px, received 128px by 48px. 1107 pixels (ratio 0.06 of all image pixels) are different. Snapshot: toggle-helper-text-ionic-md-ltr-light.png Call log: - Expect "toHaveScreenshot(toggle-helper-text-ionic-md-ltr-light.png)" with timeout 5000ms - verifying given screenshot expectation - waiting for locator('ion-toggle') - locator resolved to <ion-toggle tabindex="0" role="switch" aria-checked="false" helper-text="Helper text" aria-labelledby="ion-tg-0-lbl" aria-describedby="ion-tg-0-helper-text" class="ionic toggle-label-placement-start toggle-ltr ion-activatable ion-focusable hydrated">…</ion-toggle> - 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 390px by 48px, received 128px by 48px. 1107 pixels (ratio 0.06 of all image pixels) are different. - waiting 100ms before taking screenshot - waiting for locator('ion-toggle') - locator resolved to <ion-toggle tabindex="0" role="switch" aria-checked="false" helper-text="Helper text" aria-labelledby="ion-tg-0-lbl" aria-describedby="ion-tg-0-helper-text" class="ionic toggle-label-placement-start toggle-ltr ion-activatable ion-focusable hydrated">…</ion-toggle> - 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 390px by 48px, received 128px by 48px. 1107 pixels (ratio 0.06 of all image pixels) are different. 105 | 106 | const bottomEl = page.locator('ion-toggle'); > 107 | await expect(bottomEl).toHaveScreenshot( | ^ 108 | screenshot(`toggle-helper-text${labelPlacement ? `-${labelPlacement}` : ''}`) 109 | ); 110 | }); at /ionic/src/components/toggle/test/bottom-content/toggle.e2e.ts:107:32

1) [Mobile Safari] › src/components/toggle/test/bottom-content/toggle.e2e.ts:96:11 › toggle: 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-toggle') Expected an image 390px by 48px, received 128px by 48px. 1107 pixels (ratio 0.06 of all image pixels) are different. Snapshot: toggle-helper-text-ionic-md-ltr-light.png Call log: - Expect "toHaveScreenshot(toggle-helper-text-ionic-md-ltr-light.png)" with timeout 5000ms - verifying given screenshot expectation - waiting for locator('ion-toggle') - locator resolved to <ion-toggle tabindex="0" role="switch" aria-checked="false" helper-text="Helper text" aria-labelledby="ion-tg-0-lbl" aria-describedby="ion-tg-0-helper-text" class="ionic toggle-label-placement-start toggle-ltr ion-activatable ion-focusable hydrated">…</ion-toggle> - 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 390px by 48px, received 128px by 48px. 1107 pixels (ratio 0.06 of all image pixels) are different. - waiting 100ms before taking screenshot - waiting for locator('ion-toggle') - locator resolved to <ion-toggle tabindex="0" role="switch" aria-checked="false" helper-text="Helper text" aria-labelledby="ion-tg-0-lbl" aria-describedby="ion-tg-0-helper-text" class="ionic toggle-label-placement-start toggle-ltr ion-activatable ion-focusable hydrated">…</ion-toggle> - 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 390px by 48px, received 128px by 48px. 1107 pixels (ratio 0.06 of all image pixels) are different. 105 | 106 | const bottomEl = page.locator('ion-toggle'); > 107 | await expect(bottomEl).toHaveScreenshot( | ^ 108 | screenshot(`toggle-helper-text${labelPlacement ? `-${labelPlacement}` : ''}`) 109 | ); 110 | }); at /ionic/src/components/toggle/test/bottom-content/toggle.e2e.ts:107:32

1) [Mobile Safari] › src/components/toggle/test/bottom-content/toggle.e2e.ts:96:11 › toggle: 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-toggle') Expected an image 390px by 48px, received 128px by 48px. 1107 pixels (ratio 0.06 of all image pixels) are different. Snapshot: toggle-helper-text-ionic-md-ltr-light.png Call log: - Expect "toHaveScreenshot(toggle-helper-text-ionic-md-ltr-light.png)" with timeout 5000ms - verifying given screenshot expectation - waiting for locator('ion-toggle') - locator resolved to <ion-toggle tabindex="0" role="switch" aria-checked="false" helper-text="Helper text" aria-labelledby="ion-tg-0-lbl" aria-describedby="ion-tg-0-helper-text" class="ionic toggle-label-placement-start toggle-ltr ion-activatable ion-focusable hydrated">…</ion-toggle> - 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 390px by 48px, received 128px by 48px. 1107 pixels (ratio 0.06 of all image pixels) are different. - waiting 100ms before taking screenshot - waiting for locator('ion-toggle') - locator resolved to <ion-toggle tabindex="0" role="switch" aria-checked="false" helper-text="Helper text" aria-labelledby="ion-tg-0-lbl" aria-describedby="ion-tg-0-helper-text" class="ionic toggle-label-placement-start toggle-ltr ion-activatable ion-focusable hydrated">…</ion-toggle> - 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 390px by 48px, received 128px by 48px. 1107 pixels (ratio 0.06 of all image pixels) are different. 105 | 106 | const bottomEl = page.locator('ion-toggle'); > 107 | await expect(bottomEl).toHaveScreenshot( | ^ 108 | screenshot(`toggle-helper-text${labelPlacement ? `-${labelPlacement}` : ''}`) 109 | ); 110 | }); at /ionic/src/components/toggle/test/bottom-content/toggle.e2e.ts:107:32

test-core-screenshot (4, 20)

The strategy configuration was canceled because "test-core-screenshot._20_20" failed

test-core-screenshot (4, 20)