How to verify selector NOT present in cucumberjs / puppeteer?

Question

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');

Hmmm.....I just found the expect-puppeteer npm module. Perhaps this might work better for me. — Huckleberry Carignan, Jan 09 '19 at 15:06
I don't think expect-puppeteer npm module will satisfy my verification need. — Huckleberry Carignan, Jan 09 '19 at 15:39

AJC24 · Answer 1 · 2019-01-11T14:43:31.130

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!

Thanks for the solution. This is very helpful. – Saurabh May 14 '19 at 19:01 — Saurabh, May 14 '19 at 19:01

score 0 · Answer 2 · answered Jan 14 '19 at 21:26

0

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

answered Jan 14 '19 at 21:26

Ray

1,134
10
27

How to verify selector NOT present in cucumberjs / puppeteer?

2 Answers2