CODEWITHSUNDEEP
javascriptassertpuppeteercucumberjs
Huckleberry Carignan
Huckleberry Carignan

Reputation: 2318

How to verify selector NOT present in cucumberjs / puppeteer?

I'm trying to verify selector NOT present in cucumberjs / puppeteer. How do you use the throws assertion using cucumber-assert?

I'm working on test automation to support testing an ember front-end application. I'm using cucumberjs, puppeteerjs, and cucumber-assert.

I've used the following before:

if (await page.waitForSelector('[data-test-text-title-refunded-widget-console="true"]')) {
            let textContentOfElement = await page.evaluate(() => document.body.querySelector('[data-test-text-title-refunded-widget-console="true"]').textContent);
            return assert.equal(textContentOfElement, widgetTitle, `title with text ${  widgetTitle  } is not present`);
        }

which works when I'm verifying the an element exists and the text is correct. For my current assert, I was using the following throws assert from the cucumber-assert npm package:

assert.throws(someFunctionThatThrows).then(callback);

I'm not sure how to handle the callback function - I have the following so far.

const assert = require('cucumber-assert');

return assert.throws(await page.waitForSelector('[data-test-text-title- import-payment-file-widget-console="true"]'))
                .then(function(err) {

            });

should I return a fail in the callback?

* UPDATE * I believe I found a different approach to solve my issue. Here it is shoudl anyone else have the same issue in the future.

    if (await page.$('[data-test-text-title-import-payment-file-widget-console="true"]', { timeout: settings._30000 }) === null) {
        return Promise.resolve();
    }
    return Promise.reject('Error: The widget is present');

Upvotes: 4

Views: 3256

Answers (2)

Ray
Ray

Reputation: 1214

You should use the ExpectedConditions library. StalenessOf is the method you will want use. See here how to use it https://www.protractortest.org/#/api?view=ProtractorExpectedConditions.prototype.stalenessOf

Upvotes: 0

AJC24
AJC24

Reputation: 3336

What I do for something like this is to create a method as follows:

const isElementVisible = async (page, cssSelector) => {
  let visible = true;
  await page.waitForSelector(cssSelector, { visible: true, timeout: 2000 })
  .catch(() => {
    visible = false;
  });
  return visible;
};

// Invoke it as follows
const isVisible = await isElementVisible(page, elementCssSelector);
console.log(isVisible); // Outputs true or false

Just some pointers about how this method works:

  • I've deliberately set the timeout to 2000 since, if a selector is not visible you don't want your code to be waiting around for the default 30000 (in most cases). Maybe you want to increase / decrease this timeout setting as you see fit for your test script.
  • You need that catch block simply because you're actually expecting the element to not be visible. When the timeout occurs, your test script will trigger an exception as puppeteer thinks there's an error. You don't want this to kill your test script. Instead the catch block will catch that exception and instead set visible to false, which is then returned cleanly.

Hopefully this helps you out!

Upvotes: 5

Related Questions