Cypress

1. Babel Coder
CYPRESS

2. Babel Coder
SETUP CYPRESS
1 npm init -y
2 npm i -D cypress
3
"scripts": {
"cy:open": "cypress open",
"cy:run": "cypress run"
}
4 npm run cy:open

3. Babel Coder
SETUP TYPESCRIPT
1 npm i -D typescript
2
3
npx tsc —init
Edit tscon
fi
g.json
{
"compilerOptions": {
"target": "es5",
"lib": ["es5", "dom"],
"types": ["cypress"]
},
"include": ["**/*.ts"]
}

4. Babel Coder
SETUP ESLINT & PRETTIER
1 npm i -D eslint @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint-con
fi
g-prettier
eslint-plugin-cypress eslint-plugin-prettier prettier
2
{
"compilerOptions": {
"target": "es5",
"strict": true,
"esModuleInterop": true,
"downlevelIteration": true,
"lib": [
"ESNext",
"dom"
],
"types": [
"node",
"cypress"
]
},
"include": [
"**/*.ts"
]
}
tscon
fi
g.json
3 .prettierrc
{
"trailingComma": "all",
"singleQuote": true
}

5. Babel Coder
SETUP ESLINT & PRETTIER
4 .eslintrc.js
{
"parser": "@typescript-eslint/parser",
"extends": [
"eslint:recommended",
"plugin:@typescript-eslint/recommended",
"plugin:cypress/recommended",
"plugin:prettier/recommended"
],
"plugins": [
"@typescript-eslint",
"cypress"
],
"env": {
"cypress/globals": true
},
"rules": {
"@typescript-eslint/explicit-module-boundary-types": "o
ff
"
}
}
5 .vscode/settings.json
{
"editor.tabSize": 2,
"editor.formatOnSave": false,
"[typescript]": {
"editor.codeActionsOnSave": {
"source.
fi
xAll.eslint": true
}
},
}

6. Babel Coder
MOCHA, CYPRESS
COMMANDS AND
ASSERTIONS

7. Babel Coder
CHAI ASSERTIONS
expect(1 + 1).to.eq(2);
expect('hello').to.be.a('string');
expect('hello').to.include('hell');
expect({ name: 'Somchai' }).to.have.property('name');
expect({ age: 24 }).to.deep.eq({ age: 24 });
expect([]).to.be.empty;
expect([1, 2, 3]).to.have.lengthOf(3);

8. Babel Coder
JQUERY SELECTORS
cy.visit('/cypress/selectors');
cy.get('#outlined').should('contain', 'Outlined Button');
cy.get('.MuiButton-containedPrimary').should(
'contain',
'Contained Button'
);
cy.get('button[type="submit"]').should('contain', 'Contained Button2');
cy.get('.text-group p:
fi
rst-child').should('contain', 'H4');
cy.get('.text-group p:nth-child(2)').should('contain', 'Body');
cy.get('[data-testid="subtitle"]').should('contain', 'Subtitle');
cy.get('.text-group p:last-child').should('contain', 'Caption');

9. Babel Coder
GET, FIND AND CONTAINS
<div>
<span>List</span>
<ul>
<li><span>Word 1</span></li>
<li><span>Word 2</span></li>
<li><span>Word 3</span></li>
</ul>
</div>
<div>
<span>List</span>
<ul>
<li><span>Word 1</span></li>
<li><span>Word 2</span></li>
<li><span>Word 3</span></li>
</ul>
</div>
<div>
<span>List</span>
<ul>
<li><span>Word 1</span></li>
<li><span>Word 2</span></li>
<li><span>Word 3</span></li>
</ul>
</div>
cy.get('ul li').get('span');
cy.get('ul li').
fi
nd('span');
cy.get('ul li span');

10. Babel Coder
CHAI JQUERY
cy.visit('/cypress/selectors');
cy.get('#outlined').should('have.text', 'Outlined Button (#outlined)');
cy.get('#outlined').should('contain', 'Outlined Button');
cy.get('button[type="submit"]').should('have.attr', 'type', 'submit');
cy.get('#outlined').should('be.visible');
cy.get('#invisible').should('be.hidden');

11. Babel Coder
LODASH
const person = { name: 'Somchai', age: 24, gender: 'male' };
expect(_.omit(person, 'gender')).to.deep.eq({ name: 'Somchai', age: 24 });
expect(_.omit(person, ['age', 'gender'])).to.deep.eq({ name: 'Somchai' });
expect(_.pick(person, 'name')).to.deep.eq({ name: 'Somchai' });
expect(
_.merge({ a: 1, b: { c: 2 } }, { a: 3, d: 4, b: { e: 5 } })
).to.deep.eq({ a: 3, b: { c: 2, e: 5 }, d: 4 });
expect(_.times(5, (index) => index)).to.deep.eq([0, 1, 2, 3, 4]);
expect(_.invert({ a: 1, b: 2 })).to.deep.eq({
1: 'a',
2: 'b',
});

12. Babel Coder
COMMANDS, ASSERTIONS AND RETRY ABILITY
it('adds words correctly', () => {
cy.visit('/cypress/async-word-list'); // command
cy.getByTestID('my-word-input') // command
.type('lorem'); // command
cy.getByTestID('add-word-button') // command
.click(); // command
cy.get('ul > li') // command
.
fi
nd('span') // command
.should('have.text', 'lorem'); // assertion
cy.getByTestID('my-word-input') // command
.type('ipsum'); // command
cy.getByTestID('add-word-button') // command
.click(); // command
cy.get('ul > li') // command
.
fi
nd('span') // command
.should('have.text', 'ipsum'); // assertion
});
it('adds words correctly', () => {
cy.visit('/cypress/async-word-list');
cy.getByTestID('my-word-input').type('lorem');
cy.getByTestID('add-word-button').click();
cy.get('ul > li:
fi
rst-child span').should('have.text', 'lorem');
cy.getByTestID('my-word-input').type('ipsum');
cy.getByTestID('add-word-button').click();
cy.get('ul > li:
fi
rst-child span').should('have.text', 'ipsum');
});
Cypress only retries commands that query the DOM:
cy.get(), .
fi
nd(), .contains(), etc.
Commands are not retried when they could potentially
change the state of the application under test.
For example, Cypress will not retry the .click() command,
because it could change something in the application.

13. Babel Coder
COMMANDS, ASSERTIONS AND RETRY ABILITY
it('adds words correctly', () => {
cy.visit('/cypress/async-word-list');
cy.getByTestID('my-word-input').type('lorem');
cy.getByTestID('add-word-button').click();
cy.getByTestID('word-list-item-1').should('have.text', 'lorem');
cy.getByTestID('my-word-input').type('ipsum');
cy.getByTestID('add-word-button').click();
cy.getByTestID('word-list-item-1').should('have.text', 'ipsum');
});
it('adds words correctly', () => {
cy.visit('/cypress/async-word-list');
cy.getByTestID('my-word-input').type('lorem');
cy.getByTestID('add-word-button').click();
cy.getByTestID('my-word-input').type('ipsum');
cy.getByTestID('add-word-button').click();
cy.getByTestID('word-list-item-1').should('have.text', 'lorem');
cy.getByTestID('word-list-item-2').should('have.text', 'ipsum');
});

14. Babel Coder
SHOULD AND THEN
cy.getByTestID('word-list').then(($list) => {
const $words = $list.
fi
nd('li');
expect($words).to.have.length(2);
expect($words.
fi
rst()).to.have.text('ipsum');
expect($words.last()).to.have.text('lorem');
});
cy.getByTestID('word-list').should(($list) => {
const $words = $list.
fi
nd('li');
expect($words).to.have.length(2);
expect($words.
fi
rst()).to.have.text('ipsum');
expect($words.last()).to.have.text('lorem');
});
If you have to use commands that cannot be
retried, but need to retry the entire chain, consider
rewriting the commands into a single
.should(callbackFn) chained o
ff
the very
fi
rst
retry-able command.
The .then() command is not retried.

15. Babel Coder
CYPRESS.CONFIG.TS
import { de
fi
neCon
fi
g } from 'cypress';
export default de
fi
neCon
fi
g({
env: {
apiUrl: 'http://127.0.0.1:5000/api/v1',
},
retries: 3,
e2e: {
baseUrl: 'http://127.0.0.1:3000',
setupNodeEvents(_on, _con
fi
g) {
// implement node event listeners here
},
},
});

16. Babel Coder
CYPRESS CUSTOM COMMANDS
export const getByTestID = (
selector: string
): Cypress.Chainable<JQuery<HTMLElement>> => {
return cy.get(`[data-testid=${selector}]`);
};
Cypress.Commands.add('getByTestID', getByTestID);
import * as commands from './support/commands';
declare global {
namespace Cypress {
interface Chainable {
getByTestID: typeof commands.getByTestID;
}
}
}
commands.ts
types/global.d.ts

17. Babel Coder
LOCATION
describe('Location', () => {
it('shows location correctly', () => {
cy.visit('/cypress/location?query=test#my-hash');
cy.location('pathname').should('eq', '/cypress/location');
cy.location('search').should('eq', '?query=test');
cy.location('hash').should('eq', '#my-hash');
});
});

18. Babel Coder
WRAP, ITS AND INVOKE
const person = {
name: 'Somchai',
age: 24,
getDetails() {
return `name: ${this.name}, age: ${this.age}`;
},
};
cy.wrap(person).its('name').should('eq', 'Somchai');
cy.wrap(person).invoke('getDetails').should('eq', 'name: Somchai, age: 24');
cy.visit('/cypress/location?query=test#my-hash');
cy.location().its('pathname').should('eq', '/cypress/location');

19. Babel Coder
EACH
describe('Member List', () => {
it('renders member list correctly', () => {
const members = ['Sathit', 'Sombut', 'Somchai', 'Somprasong', 'Sornthep'];
cy.visit('/cypress/member-list');
cy.getByTestID('member-item').each(($element, index) => {
const member = members[index];
cy.wrap($element).within(() => {
cy.getByTestID('member-name').should('have.text', member);
cy.getByTestID('member-avatar')
.should('have.attr', 'alt', member)
.and('have.attr', 'src')
.and('include', member.toLowerCase());
});
});
});
});

20. Babel Coder
FAKER
Generate massive amounts of fake (but realistic)
data for testing and development.

21. Babel Coder
FAKER
faker
datatype
number()
fl
oat()
uuid()
37927
323.64
93111367-a443-4a8c-894a-f8860eea8168
import { faker } from ‘@faker-js/faker’
faker.datatype.number()
number(4) 3
number({ min: 1, max: 5 }) 5
datetime() 2064-06-09T05:08:11.581Z

22. Babel Coder
FAKER
faker
date
past()
future()
2021-01-28T10:52:38.273Z
2022-01-29T05:31:48.284Z

23. Babel Coder
FAKER
faker
lorem
word()
sentence()
paragraph()
voluptas
Accusamus quas molestias est inventore.
Nemo aliquid rem quam sint. Voluptas nisi
harum eos incidunt perspiciatis
necessitatibus aut et. Quia et inventore
reprehenderit ipsum vitae vel asperiores.

24. Babel Coder
FAKER
faker
helpers
arrayElement([‘a', 'b', ‘c']) b

25. Babel Coder
FAKER
faker
internet
email()
password()
Arely.Bahringer@gmail.com
7FMWl0aMBCv_67B

26. Babel Coder
FAKER
faker
image
imageUrl() http://placeimg.com/640/480

27. Babel Coder
FAKER
faker
name
fi
rstName()
lastName()
Wilhelm
Nicklaus
fullName() Karen Corwin

28. Babel Coder
MOCKING NETWORK
REQUESTS

29. Babel Coder
COMMAND
export const interceptApi = (
method: 'GET' | 'POST' | 'PATCH' | 'DELETE',
path: string,
response?: RouteHandler
) => {
return cy.intercept(method, `${Cypress.env('apiUrl')}${path}`, response);
};

30. Babel Coder
MODEL
import { faker } from '@faker-js/faker';
export type Category = {
id: number;
name: string;
};
export const createCategory = (category: Partial<Category> = {}) => {
const id = faker.datatype.number();
return {
id,
name: `${faker.lorem.word()}-${id}`,
...category,
};
};

31. Babel Coder
MOCKING
export const mockGetCategories = () => {
const url = '/categories';
const count = faker.datatype.number({ min: 3, max: 5 });
const categories = _.times(count, () => createCategory());
return {
url,
response: categories,
mocked: cy.interceptApi('GET', url, categories),
};
};

32. Babel Coder
FORM

33. Babel Coder
SPECIAL CHARACTERS
{del} Deletes character to the right of the cursor
{enter} Types the Enter key
{movetostart} Moves cursor to the start of typeable element
{movetoend} Moves cursor to end of typeable element
{selectall} Selects all text by creating a selection range
{alt} Activates the altKey modi
fi
er.
{ctrl} Activates the ctrlKey modi
fi
er.
{shift} Activates the shiftKey modi
fi
er.

34. Babel Coder
CYPRESS TESTING
LIBRARY

35. Babel Coder

36. Babel Coder
https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques

37. Babel Coder
cy.get('#outlined').should('contain', 'Outlined Button');
cy.getByTestId('subtitle').should('contain', 'Subtitle');
<span data-testid="subtitle">Subtitle ([data-testid="subtitle"])</span>

38. Babel Coder
cy.
fi
ndByRole('button', { name: “outlined button (#outlined)” })
.should('exist');
cy.get('#outlined').should('contain', 'Outlined Button');

39. Babel Coder
<button>OUTLINED BUTTON (#OUTLINED)</button>
<div>OUTLINED BUTTON (#OUTLINED)</div>