Package Exports

cypress-waitfor

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (cypress-waitfor) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

waitfor

A zero-dependency plugin for Cypress to wait for an element.

You sometimes have to wait for an animation, data loading or whatever before we can find an element on the page. This plugin allows you to wait for an element using Cypress own select engine and Promise ecosystem.

Usage

describe('Test suite', () => {
  it('A test description', () => {
    cy.visit('http://localhost:3000');
    // The page does an animation or loading
    // so we now need to wait for an element
    // with the id `main-body`
    cy.waitFor('#main-body');
    // Now we have instant access to the #main-body element
    cy.get('#main-body').should('contain', 'Data loaded');
  });
});

The function waitFor takes a selector string that will just be passed down to Cypress.$. So you can use any valid jQuery selector.

Options

The plugin also takes an optional options object:

cy.waitFor('#main-body', {
  timeout: 200, // The time in ms to poll for changes
  tries: 300,   // How many times to try before failing
                // 300 tries at 200ms timeout = 1min
});

Install

Install the plugin via yarn add cypress-waitfor (or npm i cypress-waitfor) and add it to your plugins.

Inside cypress/support/commands.js add:

import 'cypress-waitfor';

JSPM

cypress-waitfor