This package offers custom Cypress commands, recommended checks, and Angular Material selectors to ease the development of Cypress tests.
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 commandsimport '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 checksimport 'cypress-utils-criteo/recommended-checks/no-open-mat-snack-bar';to import specific ones
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')
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 an element in another one.
Example: cy.getByTestAttr('draggable').dragAndDrop(cy.getByTestAttr('droppable'))
Checks analytics endpoint was called with expected properties.
Example:
cy.checkAnalyticsCall({
event_type_id: 'EVENT_ID',
extra_property: value,
});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' }])
Identifies a test step with separator lines before and after.
Internally, it relies on cy.log.
Example: cy.logStep('Step 1')
Set the viewport to the correct resolution
Internally, it relies on cy.viewport.
Example: cy.changeViewport(ViewportType.Mobile)
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)
Assert that the inner text of an element matches the expected text after trimming.
Example: cy.assertInnerTextEquals('data-test-button', 'Click me')
Assert that the inner text of an element contains the expected text.
Example: cy.assertInnerTextContains('data-test-button', 'Partial text')
Assert that the current URL contains the specified query parameters.
Internally, it relies on cy.url.
Example: cy.assertUrlParams(['param1=123', 'param2=abc'])
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.
Allows to close overlays (used for dropdowns, selects, dialogs, ...).
Example: Overlay.close()
Allows to easily check the status of a snackbar. The snackbar is closed automatically.
Example: Snackbar.successShouldBeVisible() or Snackbar.errorShouldBeVisible()
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.'])
Please use Node v16.14.0 and npm v8.3.1
Before submitting a PR, run npm run build && npm run lint:fix.