first commit

This commit is contained in:
Warunee Tamkoo 2023-09-06 14:51:44 +07:00
commit eb2f504652
32490 changed files with 5731109 additions and 0 deletions

View file

@ -0,0 +1,22 @@
## Assertion Before Screenshot
If you take screenshots without assertions then you may get different screenshots depending on timing.
For example, if clicking a button makes some network calls and upon success, renders something, then the screenshot may sometimes have the new render and sometimes not.
This rule checks there is an assertion making sure your application state is correct before doing a screenshot. This makes sure the result of the screenshot will be consistent.
Invalid:
```js
cy.visit('myUrl');
cy.screenshot();
```
Valid:
```js
cy.visit('myUrl');
cy.get('[data-test-id="my-element"]').should('be.visible');
cy.screenshot();
```

View file

@ -0,0 +1,3 @@
## No Assigning Return Values
See [the Cypress Best Practices guide](https://on.cypress.io/best-practices#Assigning-Return-Values).

View file

@ -0,0 +1,52 @@
# Prevent using async/await in Cypress test cases (no-async-tests)
Cypress tests [that return a promise will error](https://docs.cypress.io/guides/references/error-messages.html#Cypress-detected-that-you-returned-a-promise-from-a-command-while-also-invoking-one-or-more-cy-commands-in-that-promise) and cannot run successfully. An `async` function returns a promise under the hood, so a test using an `async` function will also error.
## Rule Details
This rule disallows using `async` test functions.
Examples of **incorrect** code for this rule:
```js
describe('my feature', () => {
it('my test case', async () => {
await cy.get('.myClass')
// other operations
})
})
```
```js
describe('my feature', () => {
it('my test case', async () => {
cy
.get('.myClass')
.click()
await someAsyncFunction()
})
})
```
Examples of **correct** code for this rule:
```js
describe('my feature', () => {
it('my test case', () => {
cy.get('.myClass')
// other operations
})
})
```
## When Not To Use It
If there are genuine use-cases for using `async/await` in your test cases then you may not want to include this rule (or at least demote it to a warning).
## Further Reading
- [Commands Are Asynchronous](https://docs.cypress.io/guides/core-concepts/introduction-to-cypress.html#Commands-Are-Asynchronous)
- [Commands Are Promises](https://docs.cypress.io/guides/core-concepts/introduction-to-cypress.html#Commands-Are-Promises)
- [Commands Are Not Promises](https://docs.cypress.io/guides/core-concepts/introduction-to-cypress.html#Commands-Are-Not-Promises)

View file

@ -0,0 +1,51 @@
# disallow using of 'force: true' option (no-force)
Using `force: true` on inputs appears to be confusing rather than helpful.
It usually silences the actual problem instead of providing a way to overcome it.
See [Cypress Core Concepts](https://docs.cypress.io/guides/core-concepts/interacting-with-elements.html#Forcing).
If enabling this rule, it's recommended to set the severity to `warn`.
## Rule Details
This rule aims to disallow using of the `force` option on:[`.click()`](https://on.cypress.io/click),
[`.dblclick()`](https://on.cypress.io/dblclick), [`.type()`](https://on.cypress.io/type),
[`.rightclick()`](https://on.cypress.io/rightclick), [`.select()`](https://on.cypress.io/select),
[`.focus()`](https://on.cypress.io/focus), [`.check()`](https://on.cypress.io/check),
and [`.trigger()`](https://on.cypress.io/trigger).
Examples of **incorrect** code for this rule:
```js
cy.get('button').click({force: true})
cy.get('button').dblclick({force: true})
cy.get('input').type('somth', {force: true})
cy.get('div').find('.foo').find('.bar').trigger('change', {force: true})
cy.get('input').trigger('click', {force: true})
cy.get('input').rightclick({force: true})
cy.get('input').check({force: true})
cy.get('input').select({force: true})
cy.get('input').focus({force: true})
```
Examples of **correct** code for this rule:
```js
cy.get('button').click()
cy.get('button').click({multiple: true})
cy.get('button').dblclick()
cy.get('input').type('somth')
cy.get('input').trigger('click', {anyoption: true})
cy.get('input').rightclick({anyoption: true})
cy.get('input').check()
cy.get('input').select()
cy.get('input').focus()
```
## When Not To Use It
If you don't mind using `{ force: true }` with action commands, then turn this rule off.

View file

@ -0,0 +1,16 @@
## Do not use `cy.pause` command
It is recommended to remove [cy.pause](https://on.cypress.io/pause) command before committing the specs to avoid other developers getting unexpected results.
Invalid:
```js
cy.pause();
```
Valid:
```js
// only the parent cy.pause command is detected
cy.get('selector').pause();
```

View file

@ -0,0 +1,3 @@
## No Unnecessary Waiting
See [the Cypress Best Practices guide](https://on.cypress.io/best-practices#Unnecessary-Waiting).

View file

@ -0,0 +1,23 @@
## Only allow `data-*` attribute selectors (require-data-selectors)
only allow `cy.get` to allow selectors that target `data-*` attributes
See [the Cypress Best Practices guide](https://docs.cypress.io/guides/references/best-practices.html#Selecting-Elements).
> Note: If you use this rule, consider only using the `warn` error level, since using `data-*` attribute selectors may not always be possible.
### Rule Details
examples of **incorrect** code with `require-data-selectors`:
```js
cy.get(".a")
cy.get('[daedta-cy=submit]').click()
cy.get('[d-cy=submit]')
cy.get(".btn-large").click()
cy.get(".btn-.large").click()
```
examples of **correct** code with `require-data-selectors`:
```js
cy.get('[data-cy=submit]').click()
cy.get('[data-QA=submit]')
```

View file

@ -0,0 +1,3 @@
## Unsafe to chain command
See [retry-ability guide](https://docs.cypress.io/guides/core-concepts/retry-ability#Actions-should-be-at-the-end-of-chains-not-the-middle).