Search code examples
javascriptnode.jse2e-testingcodeceptjs

How to apply a conditional to an E2E Test in CodeceptJS and NightmareJS


What I need:

Have an E2E Test in CodeceptJS with Nightmare as Main Helper verify the existence of an element, and depending on the result, continue doing a series of actions or others.

Sample code:

class EventsHelper extends Helper {

  isExistsElement(selector) {
    let browser = this.helpers['Nightmare'].browser;
    return browser.evaluate((selector) => {
      return new Promise(resolve => {
        let element = document.querySelector(selector);
        resolve(element || false);
      });
    }, selector);
  }
}
module.exports = EventsHelper;

Scenario('Test 1', async (I) => {
  const isButtonRendered = await I.isExistsElement('#button');

  if (isButtonRendered) {
    I.see('Message that is displayed only if the button exists.');
    I.click('#button');
  } else {
    I.see('Alternative message that appears if this button does not exist.');
  }
});

The current result of this example code is: - If the button exists.

Evaluation timed out after 30000msec.  Are you calling done() or resolving your promises?
  • Otherwise the button does not exist: PASS.

I am open to suggestions, corrections or different ideas to solve this problem. Thank you all! (and excuse me if my English is not very clear).


Solution

  • You have to use custom helpers for the conditional itself, per the codeceptjs developers, they do not support conditionals inside the main scennario function.

    Here is a custom helper example:

    'use strict';
    import assert from 'assert';
    
    let Helper = codecept_helper;
    
    class MyHelper extends Helper {
      async clickIfVisible(selector, ...options) {
        const helper = this.helpers['Puppeteer'];
        try {
          const numVisible = await helper.grabNumberOfVisibleElements(selector);
    
          if (numVisible) {
            return helper.click(selector, ...options);
          }
        } catch (err) {
          console.log('Skipping operation as element is not visible');
        }
      }
    }
    
    module.exports = MyHelper;
    

    More info: https://github.com/Codeception/CodeceptJS/issues/648