Skip to content

Playwright

Playwright #810

Manually triggered October 25, 2023 15:10
Status Failure
Total duration 27m 43s
Artifacts
This run and associated checks have been archived and are scheduled for deletion. Learn more about checks retention

playwright.yml

on: workflow_dispatch
Matrix: playwright-react
Fit to window
Zoom out
Zoom in

Annotations

8 errors, 2 warnings, and 1 notice
[chromium] › src/components/drawer/drawer.pw.tsx:356:9 › Accessibility tests for Drawer component › should pass accessibility tests when animation time is set to 3s: playwright/support/helper.ts#L55
1) [chromium] › src/components/drawer/drawer.pw.tsx:356:9 › Accessibility tests for Drawer component › should pass accessibility tests when animation time is set to 3s Error: expect(received).toEqual(expected) // deep equality - Expected - 1 + Received + 124 - Array [] + Array [ + Object { + "description": "Ensures 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.7/color-contrast?application=playwright", + "id": "color-contrast", + "impact": "serious", + "nodes": Array [ + Object { + "all": Array [], + "any": Array [ + Object { + "data": Object { + "bgColor": "#edf1f2", + "contrastRatio": 3.68, + "expectedContrastRatio": "4.5:1", + "fgColor": "#7a7c7d", + "fontSize": "10.5pt (14px)", + "fontWeight": "normal", + "messageKey": null, + }, + "id": "color-contrast", + "impact": "serious", + "message": "Element has insufficient color contrast of 3.68 (foreground color: #7a7c7d, background color: #edf1f2, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1", + "relatedNodes": Array [ + Object { + "html": "<div class=\"sc-eNQAEJ cakBln closed closing\">", + "target": Array [ + ".sc-eNQAEJ", + ], + }, + ], + }, + ], + "failureSummary": "Fix any of the following: + Element has insufficient color contrast of 3.68 (foreground color: #7a7c7d, background color: #edf1f2, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1", + "html": "<li>link a</li>", + "impact": "serious", + "none": Array [], + "target": Array [ + "li:nth-child(1)", + ], + }, + Object { + "all": Array [], + "any": Array [ + Object { + "data": Object { + "bgColor": "#edf1f2", + "contrastRatio": 3.68, + "expectedContrastRatio": "4.5:1", + "fgColor": "#7a7c7d", + "fontSize": "10.5pt (14px)", + "fontWeight": "normal", + "messageKey": null, + }, + "id": "color-contrast", + "impact": "serious", + "message": "Element has insufficient color contrast of 3.68 (foreground color: #7a7c7d, background color: #edf1f2, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1", + "relatedNodes": Array [ + Object { + "html": "<div class=\"sc-eNQAEJ cakBln closed closing\">", + "target": Array [ + ".sc-eNQAEJ", + ], + }, + ], + }, + ], + "failureSummary": "Fix any of the following: + Element has insufficient color contrast of 3.68 (foreground color: #7a7c7d, background color: #edf1f2, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1", + "html": "<li>link b</li>", + "impact": "serious", + "none": Array [], + "target": Array [ + "li:nth-child(2)", + ], + }, + Object { + "all": Array [], + "any": Array [ + Object { + "data": Object { + "bgColor": "#edf1f2", + "contrastRatio"
[chromium] › src/components/drawer/drawer.pw.tsx:356:9 › Accessibility tests for Drawer component › should pass accessibility tests when animation time is set to 3s: playwright/support/helper.ts#L55
1) [chromium] › src/components/drawer/drawer.pw.tsx:356:9 › Accessibility tests for Drawer component › should pass accessibility tests when animation time is set to 3s Retry #1 ─────────────────────────────────────────────────────────────────────────────────────── Error: expect(received).toEqual(expected) // deep equality - Expected - 1 + Received + 124 - Array [] + Array [ + Object { + "description": "Ensures 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.7/color-contrast?application=playwright", + "id": "color-contrast", + "impact": "serious", + "nodes": Array [ + Object { + "all": Array [], + "any": Array [ + Object { + "data": Object { + "bgColor": "#edf1f2", + "contrastRatio": 1.12, + "expectedContrastRatio": "4.5:1", + "fgColor": "#e0e4e5", + "fontSize": "10.5pt (14px)", + "fontWeight": "normal", + "messageKey": null, + }, + "id": "color-contrast", + "impact": "serious", + "message": "Element has insufficient color contrast of 1.12 (foreground color: #e0e4e5, background color: #edf1f2, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1", + "relatedNodes": Array [ + Object { + "html": "<div class=\"sc-eNQAEJ cakBln closed closing\">", + "target": Array [ + ".sc-eNQAEJ", + ], + }, + ], + }, + ], + "failureSummary": "Fix any of the following: + Element has insufficient color contrast of 1.12 (foreground color: #e0e4e5, background color: #edf1f2, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1", + "html": "<li>link a</li>", + "impact": "serious", + "none": Array [], + "target": Array [ + "li:nth-child(1)", + ], + }, + Object { + "all": Array [], + "any": Array [ + Object { + "data": Object { + "bgColor": "#edf1f2", + "contrastRatio": 1.12, + "expectedContrastRatio": "4.5:1", + "fgColor": "#e0e4e5", + "fontSize": "10.5pt (14px)", + "fontWeight": "normal", + "messageKey": null, + }, + "id": "color-contrast", + "impact": "serious", + "message": "Element has insufficient color contrast of 1.12 (foreground color: #e0e4e5, background color: #edf1f2, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1", + "relatedNodes": Array [ + Object { + "html": "<div class=\"sc-eNQAEJ cakBln closed closing\">", + "target": Array [ + ".sc-eNQAEJ", + ], + }, + ], + }, + ], + "failureSummary": "Fix any of the following: + Element has insufficient color contrast of 1.12 (foreground color: #e0e4e5, background color: #edf1f2, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1", + "html": "<li>link b</li>", + "impact": "serious", + "none": Array [], + "target": Array [ + "li:nth-child(2)", + ], + }, + Object { + "all": Array [], + "any": Array [ + Object { +
[chromium] › src/components/drawer/drawer.pw.tsx:356:9 › Accessibility tests for Drawer component › should pass accessibility tests when animation time is set to 3s: playwright/support/helper.ts#L55
1) [chromium] › src/components/drawer/drawer.pw.tsx:356:9 › Accessibility tests for Drawer component › should pass accessibility tests when animation time is set to 3s Retry #2 ─────────────────────────────────────────────────────────────────────────────────────── Error: expect(received).toEqual(expected) // deep equality - Expected - 1 + Received + 159 - Array [] + Array [ + Object { + "description": "Ensures 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.7/color-contrast?application=playwright", + "id": "color-contrast", + "impact": "serious", + "nodes": Array [ + Object { + "all": Array [], + "any": Array [ + Object { + "data": Object { + "bgColor": "#edf1f2", + "contrastRatio": 1.72, + "expectedContrastRatio": "3:1", + "fgColor": "#b6baba", + "fontSize": "16.5pt (22px)", + "fontWeight": "bold", + "messageKey": null, + }, + "id": "color-contrast", + "impact": "serious", + "message": "Element has insufficient color contrast of 1.72 (foreground color: #b6baba, background color: #edf1f2, font size: 16.5pt (22px), font weight: bold). Expected contrast ratio of 3:1", + "relatedNodes": Array [ + Object { + "html": "<div class=\"sc-eNQAEJ cakBln closed closing\">", + "target": Array [ + ".sc-eNQAEJ", + ], + }, + ], + }, + ], + "failureSummary": "Fix any of the following: + Element has insufficient color contrast of 1.72 (foreground color: #b6baba, background color: #edf1f2, font size: 16.5pt (22px), font weight: bold). Expected contrast ratio of 3:1", + "html": "<h2 text-decoration=\"none\" color=\"blackOpacity90\" class=\"sc-kkGfuU kVSede\">Drawer title</h2>", + "impact": "serious", + "none": Array [], + "target": Array [ + "h2", + ], + }, + Object { + "all": Array [], + "any": Array [ + Object { + "data": Object { + "bgColor": "#edf1f2", + "contrastRatio": 1.72, + "expectedContrastRatio": "4.5:1", + "fgColor": "#b6baba", + "fontSize": "10.5pt (14px)", + "fontWeight": "normal", + "messageKey": null, + }, + "id": "color-contrast", + "impact": "serious", + "message": "Element has insufficient color contrast of 1.72 (foreground color: #b6baba, background color: #edf1f2, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1", + "relatedNodes": Array [ + Object { + "html": "<div class=\"sc-eNQAEJ cakBln closed closing\">", + "target": Array [ + ".sc-eNQAEJ", + ], + }, + ], + }, + ], + "failureSummary": "Fix any of the following: + Element has insufficient color contrast of 1.72 (foreground color: #b6baba, background color: #edf1f2, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1", + "html": "<li>link a</li>", + "impact": "serious", + "none": Array [], + "target": Array [ + "li:nth-child(1)", + ], + }, + Object { + "all": Array [], +
[chromium] › src/components/advanced-color-picker/advanced-color-picker.pw.tsx:19:7 › when focused › should have the expected styling when the focusRedesignOptOut is false: src/components/advanced-color-picker/advanced-color-picker.pw.tsx#L31
2) [chromium] › src/components/advanced-color-picker/advanced-color-picker.pw.tsx:19:7 › when focused › should have the expected styling when the focusRedesignOptOut is false Error: Timed out 5000ms waiting for expect(received).toHaveCSS(expected) Expected string: "rgba(0, 0, 0, 0) solid 3px" Received string: "rgb(0, 0, 0) none 0px" Call log: - expect.toHaveCSS with timeout 5000ms - waiting for locator('button[data-element="close"]') - locator resolved to <button type="button" aria-label="Close" data-element="c…>…</button> - unexpected value "rgb(0, 0, 0) none 0px" - locator resolved to <button type="button" aria-label="Close" data-element="c…>…</button> - unexpected value "rgb(0, 0, 0) none 0px" - locator resolved to <button type="button" aria-label="Close" data-element="c…>…</button> - unexpected value "rgb(0, 0, 0) none 0px" - locator resolved to <button type="button" aria-label="Close" data-element="c…>…</button> - unexpected value "rgb(0, 0, 0) none 0px" - locator resolved to <button type="button" aria-label="Close" data-element="c…>…</button> - unexpected value "rgb(0, 0, 0) none 0px" - locator resolved to <button type="button" aria-label="Close" data-element="c…>…</button> - unexpected value "rgb(0, 0, 0) none 0px" - locator resolved to <button type="button" aria-label="Close" data-element="c…>…</button> - unexpected value "rgb(0, 0, 0) none 0px" - locator resolved to <button type="button" aria-label="Close" data-element="c…>…</button> - unexpected value "rgb(0, 0, 0) none 0px" 29 | "rgb(255, 188, 25) 0px 0px 0px 3px, rgba(0, 0, 0, 0.9) 0px 0px 0px 6px" 30 | ); > 31 | await expect(closeIconButton(page)).toHaveCSS( | ^ 32 | "outline", 33 | "rgba(0, 0, 0, 0) solid 3px" 34 | ); at /__w/carbon/carbon/src/components/advanced-color-picker/advanced-color-picker.pw.tsx:31:41
[chromium] › src/components/batch-selection/batch-selection.pw.tsx:60:11 › check BatchSelection component properties › check BatchSelection component white colorTheme and it uses rgb(255: src/components/batch-selection/batch-selection.pw.tsx#L42
3) [chromium] › src/components/batch-selection/batch-selection.pw.tsx:60:11 › check BatchSelection component properties › check BatchSelection component white colorTheme and it uses rgb(255, 255, 255) as a background color Error: locator.getAttribute: Context was reset for reuse. =========================== logs =========================== waiting for locator('[data-component="batch-selection"]') ============================================================ 40 | await mount(<BatchSelectionComponent hidden />); 41 | const batchSelection = batchSelectionComponent(page); > 42 | await expect(batchSelection.getAttribute("hidden")).not.toBeNull(); | ^ 43 | 44 | await expect(batchSelection).toHaveCSS("opacity", "0"); 45 | }); at /__w/carbon/carbon/src/components/batch-selection/batch-selection.pw.tsx:42:33
[chromium] › src/components/dialog/dialog.pw.tsx:261:7 › Testing Dialog component properties › when tabbing through Dialog content: src/components/dialog/dialog.pw.tsx#L274
4) [chromium] › src/components/dialog/dialog.pw.tsx:261:7 › Testing Dialog component properties › when tabbing through Dialog content, focus should remain trapped inside the Dialog Error: Timed out 5000ms waiting for expect(received).toBeFocused() Call log: - expect.toBeFocused with timeout 5000ms - waiting for getByLabel('Close') - locator resolved to <button type="button" aria-label="Close" data-element="c…>…</button> - unexpected value "not focused" - locator resolved to <button type="button" aria-label="Close" data-element="c…>…</button> - unexpected value "not focused" - locator resolved to <button type="button" aria-label="Close" data-element="c…>…</button> - unexpected value "not focused" - locator resolved to <button type="button" aria-label="Close" data-element="c…>…</button> - unexpected value "not focused" - locator resolved to <button type="button" aria-label="Close" data-element="c…>…</button> - unexpected value "not focused" - locator resolved to <button type="button" aria-label="Close" data-element="c…>…</button> - unexpected value "not focused" - locator resolved to <button type="button" aria-label="Close" data-element="c…>…</button> - unexpected value "not focused" - locator resolved to <button type="button" aria-label="Close" data-element="c…>…</button> - unexpected value "not focused" 272 | 273 | await dialog.press("Tab"); > 274 | await expect(closeButton).toBeFocused(); | ^ 275 | 276 | await closeButton.press("Tab"); 277 | await expect(firstTextbox).toBeFocused(); at /__w/carbon/carbon/src/components/dialog/dialog.pw.tsx:274:31
[chromium] › src/components/dialog/dialog.pw.tsx:289:7 › Testing Dialog component properties › when shift tabbing through Dialog content: src/components/dialog/dialog.pw.tsx#L302
5) [chromium] › src/components/dialog/dialog.pw.tsx:289:7 › Testing Dialog component properties › when shift tabbing through Dialog content, focus should remain trapped inside the Dialog Error: Timed out 5000ms waiting for expect(received).toBeFocused() Call log: - expect.toBeFocused with timeout 5000ms - waiting for getByLabel('Textbox3') - locator resolved to <input type="text" value="Textbox3" aria-invalid="false…/> - unexpected value "not focused" - locator resolved to <input type="text" value="Textbox3" aria-invalid="false…/> - unexpected value "not focused" - locator resolved to <input type="text" value="Textbox3" aria-invalid="false…/> - unexpected value "not focused" - locator resolved to <input type="text" value="Textbox3" aria-invalid="false…/> - unexpected value "not focused" - locator resolved to <input type="text" value="Textbox3" aria-invalid="false…/> - unexpected value "not focused" - locator resolved to <input type="text" value="Textbox3" aria-invalid="false…/> - unexpected value "not focused" - locator resolved to <input type="text" value="Textbox3" aria-invalid="false…/> - unexpected value "not focused" - locator resolved to <input type="text" value="Textbox3" aria-invalid="false…/> - unexpected value "not focused" - locator resolved to <input type="text" value="Textbox3" aria-invalid="false…/> - unexpected value "not focused" 300 | 301 | await dialog.press("Shift+Tab"); > 302 | await expect(thirdTextbox).toBeFocused(); | ^ 303 | 304 | await thirdTextbox.press("Shift+Tab"); 305 | await expect(secondTextbox).toBeFocused(); at /__w/carbon/carbon/src/components/dialog/dialog.pw.tsx:302:32
playwright-react (chromium, 1, 1)
Process completed with exit code 1.
playwright-react (chromium, 1, 1)
Unexpected input(s) 'owner', 'repo', 'pull_number', valid inputs are ['route', 'mediaType']
playwright-react (chromium, 1, 1)
No files were found with the provided path: playwright-report/. No artifacts will be uploaded.
🎭 Playwright Run Summary
1 failed [chromium] › src/components/drawer/drawer.pw.tsx:356:9 › Accessibility tests for Drawer component › should pass accessibility tests when animation time is set to 3s 4 flaky [chromium] › src/components/advanced-color-picker/advanced-color-picker.pw.tsx:19:7 › when focused › should have the expected styling when the focusRedesignOptOut is false [chromium] › src/components/batch-selection/batch-selection.pw.tsx:60:11 › check BatchSelection component properties › check BatchSelection component white colorTheme and it uses rgb(255, 255, 255) as a background color [chromium] › src/components/dialog/dialog.pw.tsx:261:7 › Testing Dialog component properties › when tabbing through Dialog content, focus should remain trapped inside the Dialog [chromium] › src/components/dialog/dialog.pw.tsx:289:7 › Testing Dialog component properties › when shift tabbing through Dialog content, focus should remain trapped inside the Dialog 3 skipped 2255 passed (24.3m)