cypress-utils-criteo
This package offers custom Cypress commands, recommended checks, and Angular Material selectors to ease the development of Cypress tests.
Usage
Install this package npm install cypress-utils-criteo --save-dev
If you use Typescript: in the tsconfig.json file used by Cypress add the types definition: "types": ["cypress", "cypress-utils-criteo"] (under compilerOptions)
Depending on what you want to use:
For commands, in cypress/support/commands.js, add:
-
import 'cypress-utils-criteo/commands';to import all exposed commands -
import 'cypress-utils-criteo/commands/selectors';to import specific ones
For recommended checks, in cypress/support/e2e.js, add:
-
import 'cypress-utils-criteo/recommended-checks';to import all recommended checks -
import 'cypress-utils-criteo/recommended-checks/no-open-mat-snack-bar';to import specific ones
Commands
selectors/getByTestAttr
Get one or more DOM elements by their data-test attribute.
Internally, it relies on cy.get.
Example: <input data-test="name-input" /> can be retrieved with cy.getByTestAttr('name-input')
selectors/findByTestAttr
Get the descendent DOM element(s) by their data-test attribute.
Internally, it relies on cy.find.
Example: <div data-test="form-container"><input data-test="name-input" /></div> can be retrieved with cy.getByTestAttr('form-container').findByTestAttr('name-input')
drag-and-drop/dragAndDrop
Drag and drop an element in another one.
Example: cy.getByTestAttr('draggable').dragAndDrop(cy.getByTestAttr('droppable'))
analytics/checkAnalyticsCall
Checks analytics endpoint was called with expected properties.
Example:
cy.checkAnalyticsCall({
event_type_id: 'EVENT_ID',
extra_property: value,
});state-management/dispatchActions
Dispatch ngxs actions.
Controlling state to achieve the desired setup for your test is a best practice (see the cypress documentation).
Your store must be exposed in the global window of your app to use it:
// app.component.ts
constructor(private readonly store: Store) {
if ('Cypress' in window) {
window.store = this.store;
}
}Example: cy.dispatchActions([{ type: 'InitData' }])
logger/logStep
Identifies a test step with separator lines before and after.
Internally, it relies on cy.log.
Example: cy.logStep('Step 1')
viewport/changeViewport
Set the viewport to the correct resolution
Internally, it relies on cy.viewport.
Example: cy.changeViewport(ViewportType.Mobile)
assertions/assertSort
Assert that an array is sorted in the correct order, ignoring case.
Internally, it relies on cy.should and deep equality assertion.
Example: cy.assertSort(['Z', 'Y', 'X'], true)
assertions/assertInnerTextEquals
Assert that the inner text of an element matches the expected text after trimming.
Example: cy.assertInnerTextEquals('data-test-button', 'Click me')
assertions/assertInnerTextContains
Assert that the inner text of an element contains the expected text.
Example: cy.assertInnerTextContains('data-test-button', 'Partial text')
assertions/assertUrlParams
Assert that the current URL contains the specified query parameters.
Internally, it relies on cy.url.
Example: cy.assertUrlParams(['param1=123', 'param2=abc'])
Recommended checks
no-open-mat-snack-bar
Ensures there is no remaining snack bar open once a test ends: it could cover some components in the following tests, prevent Cypress from interacting with them, and make the tests fail.
Material interactions
Overlay
Allows to close overlays (used for dropdowns, selects, dialogs, ...).
Example: Overlay.close()
Snackbar
Allows to easily check the status of a snackbar. The snackbar is closed automatically.
Example: Snackbar.successShouldBeVisible() or Snackbar.errorShouldBeVisible()
Tooltip
Allows to easily check whether a tooltip exists and contains some texts (optional).
Example: Tooltip.shouldExist(cy.getByTestAttr('help-icon'), ['The tooltip should contain this text.', 'It should also contain this one.'])
Development
Please use Node v16.14.0 and npm v8.3.1
Before submitting a PR, run npm run build && npm run lint:fix.