Skip to content

Commit 5d646bb

Browse files
elidakirigoelidakirigo
committed
[UPDATE] - cypress to v13+
1 parent 48f09e8 commit 5d646bb

23 files changed

Lines changed: 755 additions & 41 deletions

‎.gitignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,3 +12,4 @@ cypress/videos
1212
cypress/fixtures
1313
cypress/screenshots
1414
*.tgz
15+
.vscode

‎cypress.config.js‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
const { defineConfig } = require('cypress')
2+
3+
module.exports = defineConfig({
4+
e2e: {
5+
setupNodeEvents(on, config) {
6+
// implement node event listeners here
7+
},
8+
},
9+
})

‎cypress.json‎

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎cypress/e2e/accesskey_spec.cy.js‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
describe("[accesskey]", () => {
2+
before(() => {
3+
cy.visit("/test/index.html");
4+
});
5+
6+
it('should show warning on elements with accesskey', () => {
7+
cy.get("[accesskey]")
8+
.after('content')
9+
.should('eq', 'WARNING (W0000): accesskey attribute could interfere and conflict with screen readers and assistive technologies.')
10+
});
11+
});

‎cypress/e2e/autoplay_spec.cy.js‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import {
2+
WARNING_BORDER_COLOR
3+
} from "../support/constants";
4+
5+
describe("[autoplay]", () => {
6+
before(() => {
7+
cy.visit("/test/index.html");
8+
});
9+
10+
it('should show warning outline on elements with autoplay', () => {
11+
cy.get("[autoplay]")
12+
.should('have.css', 'border-color', WARNING_BORDER_COLOR)
13+
});
14+
});

‎cypress/e2e/buttons_spec.cy.js‎

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
import {
2+
ERROR_BORDER_COLOR
3+
} from "../support/constants";
4+
5+
describe("<button>", () => {
6+
before(() => {
7+
cy.visit("/test/index.html");
8+
});
9+
10+
it('should not have buttons with interactive content inside', () => {
11+
const noneElements = [
12+
"audio[controls]", "embed", "iframe", "img[usemap]", 'input:not([type="hidden"])',
13+
"object[usemap]", "select", "textarea", "video[controls]"
14+
];
15+
// removed "button" from afterElements because browser was correcting the issue
16+
const afterElements = ["details", "label"];
17+
const beforeElements = [];
18+
19+
noneElements.forEach(el => {
20+
cy.get(`button ${el}`)
21+
.each(element => {
22+
cy.get(element)
23+
.should('have.css', 'border-color', 'rgb(255, 0, 0)')
24+
});
25+
});
26+
27+
afterElements.forEach(el => {
28+
cy.get(`button ${el}`)
29+
.each(element => {
30+
if (element) {
31+
cy.get(element)
32+
.after('content')
33+
.should('eq', `ERROR (E0000): Ensure that <${el}> is not a child of <button>.`);
34+
}
35+
});
36+
});
37+
38+
beforeElements.forEach(el => {
39+
cy.get(`button ${el}`)
40+
.each(element => {
41+
if (element) {
42+
cy.get(element)
43+
.before('content')
44+
.should('eq', `ERROR: Ensure that <${el}> is not a child of <button> as it is an invalid HTML.`);
45+
}
46+
});
47+
})
48+
});
49+
50+
it('should not have empty buttons', () => {
51+
cy.get('button:not( [aria-label] ):not( [aria-labelledby] ):empty')
52+
.each(element => {
53+
cy.get(element)
54+
.after("content")
55+
.should('eq', "ERROR (E0001): Ensure that <button> has meaningful content or is labelled appropriately.")
56+
});
57+
});
58+
});

‎cypress/e2e/dir_spec.cy.js‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
describe("[dir]", () => {
2+
before(() => {
3+
cy.visit("/test/index.html");
4+
});
5+
6+
it('should show error on elements with wrong values for dir attribute', () => {
7+
cy.get("[dir]:not([dir='rtl']):not([dir='ltr']):not([dir='auto'])")
8+
.each(element => {
9+
cy.get(element)
10+
.after('content')
11+
.should('eq', "ERROR (E0002): The dir attribute can only have the values, 'ltr', 'rtl' and 'auto'.");
12+
});
13+
});
14+
15+
it('should not show error on elements with correct dir values', () => {
16+
cy.get("[dir='ltr'], [dir='rtl'], [dir='auto']")
17+
.each(element => {
18+
cy.get(element)
19+
.after('content')
20+
.should('not.contain', "ERROR");
21+
});
22+
});
23+
});

‎cypress/e2e/handlers_spec.cy.js‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
describe("[handlers]", () => {
2+
before(() => {
3+
cy.visit("/test/index.html");
4+
});
5+
6+
it('should show error if the iframe does not have a title', () => {
7+
cy.get(`
8+
[onclick]:not(a):not(button):not([onkeydown]):not([onkeyup]):not([onkeypress]),
9+
[onclick][onkeyup]:not([tabindex]):not(a):not(button),
10+
[onclick][onkeyup][tabindex="-1"]:not(a):not(button),
11+
[onclick][onkeydown]:not([tabindex]):not(a):not(button),
12+
[onclick][onkeydown][tabindex="-1"]:not(a):not(button),
13+
[onclick][onkeypress]:not([tabindex]):not(a):not(button),
14+
[onclick][onkeypress][tabindex="-1"]:not(a):not(button),
15+
[ondblclick]:not(a):not(button):not([onkeydown]):not([onkeyup]):not([onkeypress]),
16+
[ondblclick][onkeyup]:not([tabindex]):not(a):not(button),
17+
[ondblclick][onkeyup][tabindex="-1"]:not(a):not(button),
18+
[ondblclick][onkeydown]:not([tabindex]):not(a):not(button),
19+
[ondblclick][onkeydown][tabindex="-1"]:not(a):not(button),
20+
[ondblclick][onkeypress]:not([tabindex]):not(a):not(button),
21+
[ondblclick][onkeypress][tabindex="-1"]:not(a):not(button),
22+
[onmousedown]:not(a):not(button):not([onkeydown]):not([onkeyup]):not([onkeypress]),
23+
[onmousedown][onkeyup]:not([tabindex]):not(a):not(button),
24+
[onmousedown][onkeyup][tabindex="-1"]:not(a):not(button),
25+
[onmousedown][onkeydown]:not([tabindex]):not(a):not(button),
26+
[onmousedown][onkeydown][tabindex="-1"]:not(a):not(button),
27+
[onmousedown][onkeypress]:not([tabindex]):not(a):not(button),
28+
[onmousedown][onkeypress][tabindex="-1"]:not(a):not(button),
29+
[onmouseup]:not(a):not(button):not([onkeydown]):not([onkeyup]):not([onkeypress]),
30+
[onmouseup][onkeyup]:not([tabindex]):not(a):not(button),
31+
[onmouseup][onkeyup][tabindex="-1"]:not(a):not(button),
32+
[onmouseup][onkeydown]:not([tabindex]):not(a):not(button),
33+
[onmouseup][onkeydown][tabindex="-1"]:not(a):not(button),
34+
[onmouseup][onkeypress]:not([tabindex]):not(a):not(button),
35+
[onmouseup][onkeypress][tabindex="-1"]:not(a):not(button),
36+
[onmouseover]:not(a):not(button),
37+
[onmouseenter]:not(a):not(button),
38+
[onmouseleave]:not(a):not(button)
39+
`)
40+
.each(element => {
41+
cy.get(element)
42+
.after('content')
43+
.should('eq', "WARNING (W0002): Potentially inaccessible click event used on non-clickable element. Ensure you have an accessible alternative.");
44+
});
45+
});
46+
});

‎cypress/e2e/head_spec.cy.js‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
describe("<head>", () => {
2+
before(() => {
3+
cy.visit("/test/index.html");
4+
});
5+
6+
it('should not have an empty title', () => {
7+
cy.get("head title:empty")
8+
.each(element => {
9+
cy.get(element)
10+
.should('have.css', 'background-image') // yields data:image....
11+
.and('match', /data/)
12+
});
13+
});
14+
15+
it('should not disallow user zooming an', () => {
16+
cy.get('head meta[name="viewport"][content*="maximum-scale=1"i], head meta[name="viewport"][content*="user-scalable=no"i]')
17+
.each(element => {
18+
cy.get(element)
19+
.should('have.css', 'background-image') // yields data:image....
20+
.and('match', /data/)
21+
});
22+
});
23+
});

‎cypress/e2e/headings_spec.cy.js‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
describe("<headings>", () => {
2+
before(() => {
3+
cy.visit("/test/index.html");
4+
});
5+
6+
it('should not have empty headings', () => {
7+
cy.get("h1:empty, h2:empty, h3:empty, h4:empty, h5:empty, h6:empty")
8+
.each(element => {
9+
cy.get(element)
10+
.after("border-color")
11+
.should('eq', 'rgb(255, 0, 0)') // they could have different error messages
12+
});
13+
});
14+
15+
it('should be accessible to assistive technologies', () => {
16+
cy.get("h1[aria-hidden], h2[aria-hidden], h3[aria-hidden], h4[aria-hidden], h5[aria-hidden], h6[aria-hidden]")
17+
.each(element => {
18+
cy.get(element)
19+
.after("border-color")
20+
.should('eq', 'rgb(255, 0, 0)') // they could have different error messages
21+
});
22+
});
23+
24+
it('should be accessible to assistive technologies', () => {
25+
cy.get("#heading-skip-levels h1, #heading-skip-levels h5, #heading-skip-levels h3")
26+
.each(element => {
27+
cy.get(element)
28+
.after("content")
29+
.should('eq', "ERROR (E0005): Headings should not skip levels.")
30+
});
31+
});
32+
33+
it('should not have role=text', () => {
34+
cy.get("h1[role='text'], h2[role='text'], h3[role='text'], h4[role='text'], h5[role='text'], h6[role='text']")
35+
.each(element => {
36+
cy.get(element)
37+
.after("content")
38+
.should('eq', "WARNING (W0010): Using role='text' on a heading element causes it to lose semantic meaning for screen readers")
39+
});
40+
});
41+
});

0 commit comments

Comments
 (0)