Nerds Pledge Magnanimously

    cypress-waitforselector

    1.2.0 • Public • Published

    waitForSelector

    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. Cypress comes with a get method which will wait for a timeout before failing which works most of the time as long as you use that method. If you need to use the jQuery selector or non-cypress methods you need to wait manually. This is where this plugin comes in.

    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.waitForSelector('#main-body');
        // Now we have instant access to the #main-body element
        const body = Cypress.$('#main-body title').attr('data-body');
      });
    });

    The function waitForSelector takes either:

    • a selector string that will just be passed down to Cypress.$. So you can use any valid jQuery selector.
    • a function that returns a boolean
    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 localStorage
        // to populate
        cy.waitForSelector(() => {
          const localData = localStorage.getItem('myData');
          return localData !== null;
        });
        // Now we know from now on our localStorage is available
      });
    });

    Options

    The plugin also takes an optional options object:

    cy.waitForSelector('#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';

    Release History

    • 1.2.0 - Renamed package
    • 1.1.0 - Added support for functions as first argument
    • 1.0.0 - First working version

    License

    Copyright (c) Dominik Wilkowski. Licensed under GNU-GPLv3.

    back to top

    };

    Install

    npm i cypress-waitforselector

    DownloadsWeekly Downloads

    754

    Version

    1.2.0

    License

    GPL-3.0

    Unpacked Size

    40.6 kB

    Total Files

    5

    Last publish

    Collaborators

    • dominikwilkowski