feat(tokens): add gray and text colors #17587
build.yml
on: pull_request
build-core
1m 23s
Matrix: test-core-screenshot
test-core-clean-build
22s
test-core-lint
51s
test-core-spec
44s
verify-screenshots
4s
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
3s
verify-test-react-router-e2e
3s
verify-test-vue-e2e
3s
Annotations
51 errors and 8 notices
|
[Mobile Chrome] › src/components/toast/test/a11y/toast.e2e.ts:265:11 › toast: high contrast: buttons - md/ltr/high-contrast-dark › should pass AAA guidelines:
src/components/toast/test/a11y/toast.e2e.ts#L273
4) [Mobile Chrome] › src/components/toast/test/a11y/toast.e2e.ts:265:11 › toast: high contrast: buttons - md/ltr/high-contrast-dark › should pass AAA guidelines
Error: expect(received).toEqual(expected) // deep equality
- Expected - 1
+ Received + 105
- Array []
+ Array [
+ Object {
+ "description": "Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds",
+ "help": "Elements must meet minimum color contrast ratio thresholds",
+ "helpUrl": "https://dequeuniversity.com/rules/axe/4.11/color-contrast?application=playwright",
+ "id": "color-contrast",
+ "impact": "serious",
+ "nodes": Array [
+ Object {
+ "all": Array [],
+ "any": Array [
+ Object {
+ "data": Object {
+ "bgColor": "#333333",
+ "contrastRatio": 1.48,
+ "expectedContrastRatio": "4.5:1",
+ "fgColor": "#121212",
+ "fontSize": "10.5pt (14px)",
+ "fontWeight": "normal",
+ "messageKey": null,
+ },
+ "id": "color-contrast",
+ "impact": "serious",
+ "message": "Element has insufficient color contrast of 1.48 (foreground color: #121212, background color: #333333, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1",
+ "relatedNodes": Array [
+ Object {
+ "html": "<div class=\"toast-wrapper toast-bottom toast-layout-baseline\" style=\"transform: translateY(calc(-8px - var(--ion-safe-area-bottom, 0px)));\">",
+ "target": Array [
+ Array [
+ "#ion-overlay-1",
+ ".toast-wrapper",
+ ],
+ ],
+ },
+ ],
+ },
+ ],
+ "failureSummary": "Fix any of the following:
+ Element has insufficient color contrast of 1.48 (foreground color: #121212, background color: #333333, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1",
+ "html": "<div class=\"toast-header\" part=\"header\">Testing</div>",
+ "impact": "serious",
+ "none": Array [],
+ "target": Array [
+ Array [
+ "#ion-overlay-1",
+ ".toast-header",
+ ],
+ ],
+ },
+ Object {
+ "all": Array [],
+ "any": Array [
+ Object {
+ "data": Object {
+ "bgColor": "#333333",
+ "contrastRatio": 1.48,
+ "expectedContrastRatio": "4.5:1",
+ "fgColor": "#121212",
+ "fontSize": "10.5pt (14px)",
+ "fontWeight": "normal",
+ "messageKey": null,
+ },
+ "id": "color-contrast",
+ "impact": "serious",
+ "message": "Element has insufficient color contrast of 1.48 (foreground color: #121212, background color: #333333, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1",
+ "relatedNodes": Array [
+ Object {
+ "html": "<div class=\"toast-wrapper toast-bottom toast-layout-baseline\" style=\"transform: translateY(calc(-8px - var(--ion-safe-area-bottom, 0px)));\">",
+ "target": Array [
+ Array [
+ "#ion-overlay-1",
+ ".toast-wrapper",
+ ],
+ ],
+ },
+ ],
+ },
+ ],
+ "failureSummary": "Fix any of the following:
+ Element has insufficient color contrast of 1.48 (foreground color: #121212, backgroun
|
|
[Mobile Chrome] › src/components/toast/test/a11y/toast.e2e.ts:256:11 › toast: high contrast: buttons - md/ltr/high-contrast-dark › should not have visual regressions:
src/components/toast/test/a11y/toast.e2e.ts#L262
3) [Mobile Chrome] › src/components/toast/test/a11y/toast.e2e.ts:256:11 › toast: high contrast: buttons - md/ltr/high-contrast-dark › should not have visual regressions
Retry #2 ───────────────────────────────────────────────────────────────────────────────────────
Error: expect(locator).toHaveScreenshot(expected) failed
Locator: locator('ion-toast').locator('.toast-wrapper')
25412 pixels (ratio 0.97 of all image pixels) are different.
Snapshot: toast-high-contrast-buttons-md-ltr-high-contrast-dark.png
Call log:
- Expect "toHaveScreenshot(toast-high-contrast-buttons-md-ltr-high-contrast-dark.png)" with timeout 5000ms
- verifying given screenshot expectation
- waiting for locator('ion-toast').locator('.toast-wrapper')
- locator resolved to <div class="toast-wrapper toast-bottom toast-layout-baseline">…</div>
- 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
- 25412 pixels (ratio 0.97 of all image pixels) are different.
- waiting 100ms before taking screenshot
- waiting for locator('ion-toast').locator('.toast-wrapper')
- locator resolved to <div class="toast-wrapper toast-bottom toast-layout-baseline">…</div>
- 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
- 25412 pixels (ratio 0.97 of all image pixels) are different.
260 |
261 | const toastWrapper = toast.locator('.toast-wrapper');
> 262 | await expect(toastWrapper).toHaveScreenshot(screenshot(`toast-high-contrast-buttons`));
| ^
263 | });
264 |
265 | test('should pass AAA guidelines', async ({ page }) => {
at /ionic/src/components/toast/test/a11y/toast.e2e.ts:262:36
|
|
[Mobile Chrome] › src/components/toast/test/a11y/toast.e2e.ts:256:11 › toast: high contrast: buttons - md/ltr/high-contrast-dark › should not have visual regressions:
src/components/toast/test/a11y/toast.e2e.ts#L262
3) [Mobile Chrome] › src/components/toast/test/a11y/toast.e2e.ts:256:11 › toast: high contrast: buttons - md/ltr/high-contrast-dark › should not have visual regressions
Retry #1 ───────────────────────────────────────────────────────────────────────────────────────
Error: expect(locator).toHaveScreenshot(expected) failed
Locator: locator('ion-toast').locator('.toast-wrapper')
25412 pixels (ratio 0.97 of all image pixels) are different.
Snapshot: toast-high-contrast-buttons-md-ltr-high-contrast-dark.png
Call log:
- Expect "toHaveScreenshot(toast-high-contrast-buttons-md-ltr-high-contrast-dark.png)" with timeout 5000ms
- verifying given screenshot expectation
- waiting for locator('ion-toast').locator('.toast-wrapper')
- locator resolved to <div class="toast-wrapper toast-bottom toast-layout-baseline">…</div>
- 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
- 25412 pixels (ratio 0.97 of all image pixels) are different.
- waiting 100ms before taking screenshot
- waiting for locator('ion-toast').locator('.toast-wrapper')
- locator resolved to <div class="toast-wrapper toast-bottom toast-layout-baseline">…</div>
- 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
- 25412 pixels (ratio 0.97 of all image pixels) are different.
260 |
261 | const toastWrapper = toast.locator('.toast-wrapper');
> 262 | await expect(toastWrapper).toHaveScreenshot(screenshot(`toast-high-contrast-buttons`));
| ^
263 | });
264 |
265 | test('should pass AAA guidelines', async ({ page }) => {
at /ionic/src/components/toast/test/a11y/toast.e2e.ts:262:36
|
|
[Mobile Chrome] › src/components/toast/test/a11y/toast.e2e.ts:256:11 › toast: high contrast: buttons - md/ltr/high-contrast-dark › should not have visual regressions:
src/components/toast/test/a11y/toast.e2e.ts#L262
3) [Mobile Chrome] › src/components/toast/test/a11y/toast.e2e.ts:256:11 › toast: high contrast: buttons - md/ltr/high-contrast-dark › should not have visual regressions
Error: expect(locator).toHaveScreenshot(expected) failed
Locator: locator('ion-toast').locator('.toast-wrapper')
25412 pixels (ratio 0.97 of all image pixels) are different.
Snapshot: toast-high-contrast-buttons-md-ltr-high-contrast-dark.png
Call log:
- Expect "toHaveScreenshot(toast-high-contrast-buttons-md-ltr-high-contrast-dark.png)" with timeout 5000ms
- verifying given screenshot expectation
- waiting for locator('ion-toast').locator('.toast-wrapper')
- locator resolved to <div class="toast-wrapper toast-bottom toast-layout-baseline">…</div>
- 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
- 25412 pixels (ratio 0.97 of all image pixels) are different.
- waiting 100ms before taking screenshot
- waiting for locator('ion-toast').locator('.toast-wrapper')
- locator resolved to <div class="toast-wrapper toast-bottom toast-layout-baseline">…</div>
- 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
- 25412 pixels (ratio 0.97 of all image pixels) are different.
260 |
261 | const toastWrapper = toast.locator('.toast-wrapper');
> 262 | await expect(toastWrapper).toHaveScreenshot(screenshot(`toast-high-contrast-buttons`));
| ^
263 | });
264 |
265 | test('should pass AAA guidelines', async ({ page }) => {
at /ionic/src/components/toast/test/a11y/toast.e2e.ts:262:36
|
|
[Mobile Chrome] › src/components/toast/test/a11y/toast.e2e.ts:265:11 › toast: high contrast: buttons - ios/ltr/high-contrast-dark › should pass AAA guidelines:
src/components/toast/test/a11y/toast.e2e.ts#L273
2) [Mobile Chrome] › src/components/toast/test/a11y/toast.e2e.ts:265:11 › toast: high contrast: buttons - ios/ltr/high-contrast-dark › should pass AAA guidelines
Retry #2 ───────────────────────────────────────────────────────────────────────────────────────
Error: expect(received).toEqual(expected) // deep equality
- Expected - 1
+ Received + 105
- Array []
+ Array [
+ Object {
+ "description": "Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds",
+ "help": "Elements must meet minimum color contrast ratio thresholds",
+ "helpUrl": "https://dequeuniversity.com/rules/axe/4.11/color-contrast?application=playwright",
+ "id": "color-contrast",
+ "impact": "serious",
+ "nodes": Array [
+ Object {
+ "all": Array [],
+ "any": Array [
+ Object {
+ "data": Object {
+ "bgColor": "#f2f2f2",
+ "contrastRatio": 2.05,
+ "expectedContrastRatio": "4.5:1",
+ "fgColor": "#7cabff",
+ "fontSize": "12.8pt (17px)",
+ "fontWeight": "normal",
+ "messageKey": null,
+ },
+ "id": "color-contrast",
+ "impact": "serious",
+ "message": "Element has insufficient color contrast of 2.05 (foreground color: #7cabff, background color: #f2f2f2, font size: 12.8pt (17px), font weight: normal). Expected contrast ratio of 4.5:1",
+ "relatedNodes": Array [
+ Object {
+ "html": "<div class=\"toast-wrapper toast-bottom toast-layout-baseline\">",
+ "target": Array [
+ Array [
+ "#ion-overlay-1",
+ ".toast-wrapper",
+ ],
+ ],
+ },
+ ],
+ },
+ ],
+ "failureSummary": "Fix any of the following:
+ Element has insufficient color contrast of 2.05 (foreground color: #7cabff, background color: #f2f2f2, font size: 12.8pt (17px), font weight: normal). Expected contrast ratio of 4.5:1",
+ "html": "<div class=\"toast-button-inner\">Cancel</div>",
+ "impact": "serious",
+ "none": Array [],
+ "target": Array [
+ Array [
+ "#ion-overlay-1",
+ ".toast-button-cancel > .toast-button-inner",
+ ],
+ ],
+ },
+ Object {
+ "all": Array [],
+ "any": Array [
+ Object {
+ "data": Object {
+ "bgColor": "#f2f2f2",
+ "contrastRatio": 2.05,
+ "expectedContrastRatio": "4.5:1",
+ "fgColor": "#7cabff",
+ "fontSize": "12.8pt (17px)",
+ "fontWeight": "normal",
+ "messageKey": null,
+ },
+ "id": "color-contrast",
+ "impact": "serious",
+ "message": "Element has insufficient color contrast of 2.05 (foreground color: #7cabff, background color: #f2f2f2, font size: 12.8pt (17px), font weight: normal). Expected contrast ratio of 4.5:1",
+ "relatedNodes": Array [
+ Object {
+ "html": "<div class=\"toast-wrapper toast-bottom toast-layout-baseline\">",
+ "target": Array [
+ Array [
+ "#ion-overlay-1",
+ ".toast-wrapper",
+ ],
+ ],
+ },
+ ],
+ },
+ ],
+ "failureSummary": "Fix any of the following:
+ Element has insufficient color contrast of 2.05 (foreground color: #7cabff, background color: #f2f2f2, font size: 12.8pt (17
|
|
[Mobile Chrome] › src/components/toast/test/a11y/toast.e2e.ts:265:11 › toast: high contrast: buttons - ios/ltr/high-contrast-dark › should pass AAA guidelines:
src/components/toast/test/a11y/toast.e2e.ts#L273
2) [Mobile Chrome] › src/components/toast/test/a11y/toast.e2e.ts:265:11 › toast: high contrast: buttons - ios/ltr/high-contrast-dark › should pass AAA guidelines
Retry #1 ───────────────────────────────────────────────────────────────────────────────────────
Error: expect(received).toEqual(expected) // deep equality
- Expected - 1
+ Received + 105
- Array []
+ Array [
+ Object {
+ "description": "Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds",
+ "help": "Elements must meet minimum color contrast ratio thresholds",
+ "helpUrl": "https://dequeuniversity.com/rules/axe/4.11/color-contrast?application=playwright",
+ "id": "color-contrast",
+ "impact": "serious",
+ "nodes": Array [
+ Object {
+ "all": Array [],
+ "any": Array [
+ Object {
+ "data": Object {
+ "bgColor": "#f2f2f2",
+ "contrastRatio": 2.05,
+ "expectedContrastRatio": "4.5:1",
+ "fgColor": "#7cabff",
+ "fontSize": "12.8pt (17px)",
+ "fontWeight": "normal",
+ "messageKey": null,
+ },
+ "id": "color-contrast",
+ "impact": "serious",
+ "message": "Element has insufficient color contrast of 2.05 (foreground color: #7cabff, background color: #f2f2f2, font size: 12.8pt (17px), font weight: normal). Expected contrast ratio of 4.5:1",
+ "relatedNodes": Array [
+ Object {
+ "html": "<div class=\"toast-wrapper toast-bottom toast-layout-baseline\">",
+ "target": Array [
+ Array [
+ "#ion-overlay-1",
+ ".toast-wrapper",
+ ],
+ ],
+ },
+ ],
+ },
+ ],
+ "failureSummary": "Fix any of the following:
+ Element has insufficient color contrast of 2.05 (foreground color: #7cabff, background color: #f2f2f2, font size: 12.8pt (17px), font weight: normal). Expected contrast ratio of 4.5:1",
+ "html": "<div class=\"toast-button-inner\">Cancel</div>",
+ "impact": "serious",
+ "none": Array [],
+ "target": Array [
+ Array [
+ "#ion-overlay-1",
+ ".toast-button-cancel > .toast-button-inner",
+ ],
+ ],
+ },
+ Object {
+ "all": Array [],
+ "any": Array [
+ Object {
+ "data": Object {
+ "bgColor": "#f2f2f2",
+ "contrastRatio": 2.05,
+ "expectedContrastRatio": "4.5:1",
+ "fgColor": "#7cabff",
+ "fontSize": "12.8pt (17px)",
+ "fontWeight": "normal",
+ "messageKey": null,
+ },
+ "id": "color-contrast",
+ "impact": "serious",
+ "message": "Element has insufficient color contrast of 2.05 (foreground color: #7cabff, background color: #f2f2f2, font size: 12.8pt (17px), font weight: normal). Expected contrast ratio of 4.5:1",
+ "relatedNodes": Array [
+ Object {
+ "html": "<div class=\"toast-wrapper toast-bottom toast-layout-baseline\">",
+ "target": Array [
+ Array [
+ "#ion-overlay-1",
+ ".toast-wrapper",
+ ],
+ ],
+ },
+ ],
+ },
+ ],
+ "failureSummary": "Fix any of the following:
+ Element has insufficient color contrast of 2.05 (foreground color: #7cabff, background color: #f2f2f2, font size: 12.8pt (17
|
|
[Mobile Chrome] › src/components/toast/test/a11y/toast.e2e.ts:265:11 › toast: high contrast: buttons - ios/ltr/high-contrast-dark › should pass AAA guidelines:
src/components/toast/test/a11y/toast.e2e.ts#L273
2) [Mobile Chrome] › src/components/toast/test/a11y/toast.e2e.ts:265:11 › toast: high contrast: buttons - ios/ltr/high-contrast-dark › should pass AAA guidelines
Error: expect(received).toEqual(expected) // deep equality
- Expected - 1
+ Received + 105
- Array []
+ Array [
+ Object {
+ "description": "Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds",
+ "help": "Elements must meet minimum color contrast ratio thresholds",
+ "helpUrl": "https://dequeuniversity.com/rules/axe/4.11/color-contrast?application=playwright",
+ "id": "color-contrast",
+ "impact": "serious",
+ "nodes": Array [
+ Object {
+ "all": Array [],
+ "any": Array [
+ Object {
+ "data": Object {
+ "bgColor": "#f2f2f2",
+ "contrastRatio": 2.05,
+ "expectedContrastRatio": "4.5:1",
+ "fgColor": "#7cabff",
+ "fontSize": "12.8pt (17px)",
+ "fontWeight": "normal",
+ "messageKey": null,
+ },
+ "id": "color-contrast",
+ "impact": "serious",
+ "message": "Element has insufficient color contrast of 2.05 (foreground color: #7cabff, background color: #f2f2f2, font size: 12.8pt (17px), font weight: normal). Expected contrast ratio of 4.5:1",
+ "relatedNodes": Array [
+ Object {
+ "html": "<div class=\"toast-wrapper toast-bottom toast-layout-baseline\">",
+ "target": Array [
+ Array [
+ "#ion-overlay-1",
+ ".toast-wrapper",
+ ],
+ ],
+ },
+ ],
+ },
+ ],
+ "failureSummary": "Fix any of the following:
+ Element has insufficient color contrast of 2.05 (foreground color: #7cabff, background color: #f2f2f2, font size: 12.8pt (17px), font weight: normal). Expected contrast ratio of 4.5:1",
+ "html": "<div class=\"toast-button-inner\">Cancel</div>",
+ "impact": "serious",
+ "none": Array [],
+ "target": Array [
+ Array [
+ "#ion-overlay-1",
+ ".toast-button-cancel > .toast-button-inner",
+ ],
+ ],
+ },
+ Object {
+ "all": Array [],
+ "any": Array [
+ Object {
+ "data": Object {
+ "bgColor": "#f2f2f2",
+ "contrastRatio": 2.05,
+ "expectedContrastRatio": "4.5:1",
+ "fgColor": "#7cabff",
+ "fontSize": "12.8pt (17px)",
+ "fontWeight": "normal",
+ "messageKey": null,
+ },
+ "id": "color-contrast",
+ "impact": "serious",
+ "message": "Element has insufficient color contrast of 2.05 (foreground color: #7cabff, background color: #f2f2f2, font size: 12.8pt (17px), font weight: normal). Expected contrast ratio of 4.5:1",
+ "relatedNodes": Array [
+ Object {
+ "html": "<div class=\"toast-wrapper toast-bottom toast-layout-baseline\">",
+ "target": Array [
+ Array [
+ "#ion-overlay-1",
+ ".toast-wrapper",
+ ],
+ ],
+ },
+ ],
+ },
+ ],
+ "failureSummary": "Fix any of the following:
+ Element has insufficient color contrast of 2.05 (foreground color: #7cabff, background color: #f2f2f2, font size: 12.8pt (17px), font weight: normal). Expected contrast ratio of 4.5:1",
+ "html": "<div class=\"toas
|
|
[Mobile Chrome] › src/components/toast/test/a11y/toast.e2e.ts:256:11 › toast: high contrast: buttons - ios/ltr/high-contrast-dark › should not have visual regressions:
src/components/toast/test/a11y/toast.e2e.ts#L262
1) [Mobile Chrome] › src/components/toast/test/a11y/toast.e2e.ts:256:11 › toast: high contrast: buttons - ios/ltr/high-contrast-dark › should not have visual regressions
Retry #2 ───────────────────────────────────────────────────────────────────────────────────────
Error: expect(locator).toHaveScreenshot(expected) failed
Locator: locator('ion-toast').locator('.toast-wrapper')
22822 pixels (ratio 0.96 of all image pixels) are different.
Snapshot: toast-high-contrast-buttons-ios-ltr-high-contrast-dark.png
Call log:
- Expect "toHaveScreenshot(toast-high-contrast-buttons-ios-ltr-high-contrast-dark.png)" with timeout 5000ms
- verifying given screenshot expectation
- waiting for locator('ion-toast').locator('.toast-wrapper')
- locator resolved to <div class="toast-wrapper toast-bottom toast-layout-baseline">…</div>
- 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
- 22822 pixels (ratio 0.96 of all image pixels) are different.
- waiting 100ms before taking screenshot
- waiting for locator('ion-toast').locator('.toast-wrapper')
- locator resolved to <div class="toast-wrapper toast-bottom toast-layout-baseline">…</div>
- 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
- 22822 pixels (ratio 0.96 of all image pixels) are different.
260 |
261 | const toastWrapper = toast.locator('.toast-wrapper');
> 262 | await expect(toastWrapper).toHaveScreenshot(screenshot(`toast-high-contrast-buttons`));
| ^
263 | });
264 |
265 | test('should pass AAA guidelines', async ({ page }) => {
at /ionic/src/components/toast/test/a11y/toast.e2e.ts:262:36
|
|
[Mobile Chrome] › src/components/toast/test/a11y/toast.e2e.ts:256:11 › toast: high contrast: buttons - ios/ltr/high-contrast-dark › should not have visual regressions:
src/components/toast/test/a11y/toast.e2e.ts#L262
1) [Mobile Chrome] › src/components/toast/test/a11y/toast.e2e.ts:256:11 › toast: high contrast: buttons - ios/ltr/high-contrast-dark › should not have visual regressions
Retry #1 ───────────────────────────────────────────────────────────────────────────────────────
Error: expect(locator).toHaveScreenshot(expected) failed
Locator: locator('ion-toast').locator('.toast-wrapper')
22822 pixels (ratio 0.96 of all image pixels) are different.
Snapshot: toast-high-contrast-buttons-ios-ltr-high-contrast-dark.png
Call log:
- Expect "toHaveScreenshot(toast-high-contrast-buttons-ios-ltr-high-contrast-dark.png)" with timeout 5000ms
- verifying given screenshot expectation
- waiting for locator('ion-toast').locator('.toast-wrapper')
- locator resolved to <div class="toast-wrapper toast-bottom toast-layout-baseline">…</div>
- 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
- 22822 pixels (ratio 0.96 of all image pixels) are different.
- waiting 100ms before taking screenshot
- waiting for locator('ion-toast').locator('.toast-wrapper')
- locator resolved to <div class="toast-wrapper toast-bottom toast-layout-baseline">…</div>
- 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
- 22822 pixels (ratio 0.96 of all image pixels) are different.
260 |
261 | const toastWrapper = toast.locator('.toast-wrapper');
> 262 | await expect(toastWrapper).toHaveScreenshot(screenshot(`toast-high-contrast-buttons`));
| ^
263 | });
264 |
265 | test('should pass AAA guidelines', async ({ page }) => {
at /ionic/src/components/toast/test/a11y/toast.e2e.ts:262:36
|
|
[Mobile Chrome] › src/components/toast/test/a11y/toast.e2e.ts:256:11 › toast: high contrast: buttons - ios/ltr/high-contrast-dark › should not have visual regressions:
src/components/toast/test/a11y/toast.e2e.ts#L262
1) [Mobile Chrome] › src/components/toast/test/a11y/toast.e2e.ts:256:11 › toast: high contrast: buttons - ios/ltr/high-contrast-dark › should not have visual regressions
Error: expect(locator).toHaveScreenshot(expected) failed
Locator: locator('ion-toast').locator('.toast-wrapper')
22822 pixels (ratio 0.96 of all image pixels) are different.
Snapshot: toast-high-contrast-buttons-ios-ltr-high-contrast-dark.png
Call log:
- Expect "toHaveScreenshot(toast-high-contrast-buttons-ios-ltr-high-contrast-dark.png)" with timeout 5000ms
- verifying given screenshot expectation
- waiting for locator('ion-toast').locator('.toast-wrapper')
- locator resolved to <div class="toast-wrapper toast-bottom toast-layout-baseline">…</div>
- 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
- 22822 pixels (ratio 0.96 of all image pixels) are different.
- waiting 100ms before taking screenshot
- waiting for locator('ion-toast').locator('.toast-wrapper')
- locator resolved to <div class="toast-wrapper toast-bottom toast-layout-baseline">…</div>
- 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
- 22822 pixels (ratio 0.96 of all image pixels) are different.
260 |
261 | const toastWrapper = toast.locator('.toast-wrapper');
> 262 | await expect(toastWrapper).toHaveScreenshot(screenshot(`toast-high-contrast-buttons`));
| ^
263 | });
264 |
265 | test('should pass AAA guidelines', async ({ page }) => {
at /ionic/src/components/toast/test/a11y/toast.e2e.ts:262:36
|
|
test-core-screenshot (4, 20)
The strategy configuration was canceled because "test-core-screenshot._13_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 (16, 20)
The strategy configuration was canceled because "test-core-screenshot._13_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 (5, 20)
The strategy configuration was canceled because "test-core-screenshot._13_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 (6, 20)
The strategy configuration was canceled because "test-core-screenshot._13_20" failed
|
|
test-core-screenshot (6, 20)
Process completed with exit code 12.
|
|
test-core-screenshot (6, 20)
The operation was canceled.
|
|
test-core-screenshot (19, 20)
The strategy configuration was canceled because "test-core-screenshot._13_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 (2, 20)
The strategy configuration was canceled because "test-core-screenshot._13_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 (1, 20)
The strategy configuration was canceled because "test-core-screenshot._13_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 (3, 20)
The strategy configuration was canceled because "test-core-screenshot._13_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 (18, 20)
The strategy configuration was canceled because "test-core-screenshot._13_20" failed
|
|
test-core-screenshot (18, 20)
Process completed with exit code 12.
|
|
test-core-screenshot (18, 20)
The operation was canceled.
|
|
test-core-screenshot (11, 20)
The strategy configuration was canceled because "test-core-screenshot._13_20" failed
|
|
test-core-screenshot (11, 20)
The operation was canceled.
|
|
[Mobile Chrome] › src/components/radio/test/a11y/radio.e2e.ts:117:11 › radio: a11y - md/ltr/dark › radio: keyboard navigation - md/ltr/dark › tabbing should switch between radio groups:
src/components/radio/test/a11y/radio.e2e.ts#L122
1) [Mobile Chrome] › src/components/radio/test/a11y/radio.e2e.ts:117:11 › radio: a11y - md/ltr/dark › radio: keyboard navigation - md/ltr/dark › tabbing should switch between radio groups
Retry #1 ───────────────────────────────────────────────────────────────────────────────────────
Error: expect(locator).toBeFocused() failed
Locator: locator('#first-group ion-radio').first()
Expected: focused
Received: inactive
Timeout: 5000ms
Call log:
- Expect "toBeFocused" with timeout 5000ms
- waiting for locator('#first-group ion-radio').first()
9 × locator resolved to <ion-radio value="huey" role="radio" tabindex="0" aria-checked="true" class="md in-item radio-checked radio-label-placement-start hydrated">Huey</ion-radio>
- unexpected value "inactive"
120 |
121 | await pageUtils.pressKeys('Tab');
> 122 | await expect(firstGroupRadios.nth(0)).toBeFocused();
| ^
123 |
124 | await pageUtils.pressKeys('Tab');
125 | await expect(secondGroupRadios.nth(0)).toBeFocused();
at /ionic/src/components/radio/test/a11y/radio.e2e.ts:122:47
|
|
[Mobile Chrome] › src/components/radio/test/a11y/radio.e2e.ts:117:11 › radio: a11y - md/ltr/dark › radio: keyboard navigation - md/ltr/dark › tabbing should switch between radio groups:
src/components/radio/test/a11y/radio.e2e.ts#L122
1) [Mobile Chrome] › src/components/radio/test/a11y/radio.e2e.ts:117:11 › radio: a11y - md/ltr/dark › radio: keyboard navigation - md/ltr/dark › tabbing should switch between radio groups
Error: expect(locator).toBeFocused() failed
Locator: locator('#first-group ion-radio').first()
Expected: focused
Received: inactive
Timeout: 5000ms
Call log:
- Expect "toBeFocused" with timeout 5000ms
- waiting for locator('#first-group ion-radio').first()
9 × locator resolved to <ion-radio value="huey" role="radio" tabindex="0" aria-checked="true" class="md in-item radio-checked radio-label-placement-start hydrated">Huey</ion-radio>
- unexpected value "inactive"
120 |
121 | await pageUtils.pressKeys('Tab');
> 122 | await expect(firstGroupRadios.nth(0)).toBeFocused();
| ^
123 |
124 | await pageUtils.pressKeys('Tab');
125 | await expect(secondGroupRadios.nth(0)).toBeFocused();
at /ionic/src/components/radio/test/a11y/radio.e2e.ts:122:47
|
|
test-core-screenshot (15, 20)
The strategy configuration was canceled because "test-core-screenshot._13_20" failed
|
|
test-core-screenshot (15, 20)
Process completed with exit code 12.
|
|
test-core-screenshot (15, 20)
The operation was canceled.
|
|
test-core-screenshot (17, 20)
The strategy configuration was canceled because "test-core-screenshot._13_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 (14, 20)
The strategy configuration was canceled because "test-core-screenshot._13_20" failed
|
|
test-core-screenshot (14, 20)
Process completed with exit code 12.
|
|
test-core-screenshot (14, 20)
The operation was canceled.
|
|
verify-screenshots
Process completed with exit code 1.
|
|
🎭 Playwright Run Summary
360 skipped
275 passed (2.2m)
|
|
🎭 Playwright Run Summary
368 skipped
307 passed (3.5m)
|
|
🎭 Playwright Run Summary
2 skipped
669 passed (3.7m)
|
|
🎭 Playwright Run Summary
1 skipped
676 passed (3.8m)
|
|
🎭 Playwright Run Summary
8 skipped
683 passed (3.8m)
|
|
🎭 Playwright Run Summary
8 skipped
663 passed (4.4m)
|
|
🎭 Playwright Run Summary
4 failed
[Mobile Chrome] › src/components/toast/test/a11y/toast.e2e.ts:256:11 › toast: high contrast: buttons - ios/ltr/high-contrast-dark › should not have visual regressions
[Mobile Chrome] › src/components/toast/test/a11y/toast.e2e.ts:265:11 › toast: high contrast: buttons - ios/ltr/high-contrast-dark › should pass AAA guidelines
[Mobile Chrome] › src/components/toast/test/a11y/toast.e2e.ts:256:11 › toast: high contrast: buttons - md/ltr/high-contrast-dark › should not have visual regressions
[Mobile Chrome] › src/components/toast/test/a11y/toast.e2e.ts:265:11 › toast: high contrast: buttons - md/ltr/high-contrast-dark › should pass AAA guidelines
1 flaky
[Mobile Chrome] › src/components/title/test/basic/title.e2e.ts:6:9 › title: basic - ionic/md/ltr/light › should not have visual regressions
144 skipped
710 passed (4.9m)
|
|
🎭 Playwright Run Summary
1 flaky
[Mobile Chrome] › src/components/radio/test/a11y/radio.e2e.ts:117:11 › radio: a11y - md/ltr/dark › radio: keyboard navigation - md/ltr/dark › tabbing should switch between radio groups
4 skipped
675 passed (5.0m)
|
Artifacts
Produced during runtime
| Name | Size | Digest | |
|---|---|---|---|
|
ionic-angular
|
776 KB |
sha256:aca642a01f66ee26adf370f99793d34fc856f3b41ab2c7c5ea0639eff4db04a0
|
|
|
ionic-angular-server
|
8.55 KB |
sha256:e048a20c4dab73e4e5759fafb51862d53784ee5b2c47c7bb8a777b3470366c68
|
|
|
ionic-core
|
5.16 MB |
sha256:676568f04f7ab0326fabc5b23747916a91d3016b249413136fc4a9df2c70d507
|
|
|
ionic-react
|
314 KB |
sha256:4c9e35857ab9f719ff297769dbdfd1e1b2e01c6a87ff4a003cde7029c4349b67
|
|
|
ionic-react-router
|
27.9 KB |
sha256:207cbfcb37a707d6a5fbaa97a97bb03241a699d8dfdc10ffa8aea45a27102b2e
|
|
|
ionic-vue
|
344 KB |
sha256:e74170c16c33ad1fde4012c37785230e931b47429dba2a3d094e961277eab9ed
|
|
|
ionic-vue-router
|
17 KB |
sha256:f43ce761cfb45c9632a248057d8075b0f7d8e70b09e597ce61b90a5079f9f429
|
|
|
test-results-10-20
|
462 KB |
sha256:88d6c923fc77d5773ffe8996690d5c048759671c4007f5810f44ee4c4d10a317
|
|
|
test-results-11-20
|
1.72 MB |
sha256:16469c20975defa32748eb729a1243f754a07732d251eb7a0ff1b4062863910d
|
|
|
test-results-12-20
|
498 KB |
sha256:d82bc27dc1fe75df20466450516276ac27af39527f18ec4c9625d56881809d08
|
|
|
test-results-13-20
|
13.5 MB |
sha256:aac2e87a20666ce0d7c902a9f2ab4f99e60a28fa39e1591bf60a16cf01ca4dc6
|
|
|
test-results-20-20
|
356 KB |
sha256:060b36a51709d257b8aa574a9f07e8892b8a51fafbc57475bef97b6b622547b2
|
|
|
test-results-7-20
|
374 KB |
sha256:a784b078a562814d2d3ec056778eeb47903b0ef3d97eac3fdb044346a6241a5d
|
|
|
test-results-8-20
|
465 KB |
sha256:b9be067518ad62b55d6ee417f555ac2ec4579fa4ec4fd9278933d25ed09b53b9
|
|
|
test-results-9-20
|
504 KB |
sha256:ca4709a93b87fe6e1fb27cf744a7735580b3e95251cd27bfe7b346879b5a4d06
|
|