title: How to catch cucumberJS timeouts and not fail steps
body: <p>So I have a cucumberJS/PuppeteerJS solution for test automation.  I have an issue when it comes to checking for a button.  There is a Load More button that will appear when there are more items to load on a list and not appear when all the items have appeared.</p>
  
  <p>Example: The list of 10 things will only show 4 at first and the Load More button.  You select the Load More button and now 8 will show.  You selected it again and all 10 items are there, and the Load More button is no longer present.</p>
  
  <p>I have some feature files which call a step_definition which in turn calls some functions in world.js</p>
  
  <p>I have some code to check if the button is there:</p>
  
  <pre><code>const isElementVisible = async (cssSelector) =&gt; {
      return Promise.resolve(
          page.waitForSelector(cssSelector, { visible: true, timeout: settings._5000 })
      ).then(() =&gt; {
          return true;
      }).catch(() =&gt; {
          return false;
      });
  };
  </code></pre>
  
  <p>This is called by:</p>
  
  <pre><code>// Select Load More Agencies button if button is there
  async clickButtonLoadMore() {
      // check to see if element is visible
      let selectorForLoadMoreButton = '[data-test-button="Load More"]';
      let loadMoreVisible = await isElementVisible(selectorForLoadMoreButton);
      // If button visible, select it
      while (loadMoreVisible) {
          await page
              .click('[data-test-button="Load More"]');
          loadMoreVisible = await isElementVisible(selectorForLoadMoreButton);
      }
  }
  </code></pre>
  
  <p>My problem is that when I've select the Load More button on the third time, like in the example above, the time-out (in the page.waitForSelector) fails to the feature file level and doesn't get handled by the promise.</p>
  
  <pre><code>   ✔ When the View List button is selected on the navigation pane # features/step_definitions/console_steps.js:7
     ✖ And click the Load More # features/step_definitions/console_steps.js:31
     Error: No node found for selector: [data-test-button="Load More"]
             at assert (/Users/huckcarignan/Desktop/sprint04/epay-test-automation/node_modules/puppeteer/lib/helper.js:229:11)
             at DOMWorld.click 
  (/Users/huckcarignan/Desktop/sprint04/epay-test-automation/node_modules/puppeteer/lib/DOMWorld.js:359:5)
             at &lt;anonymous&gt;
           -- ASYNC --
             at Frame.&lt;anonymous&gt; (/Users/huckcarignan/Desktop/sprint04/epay-test-automation/node_modules/puppeteer/lib/helper.js:108:27)
             at Page.click (/Users/huckcarignan/Desktop/sprint04/epay-test-automation/node_modules/puppeteer/lib/Page.js:1021:29)
             at ePayApp.clickButtonLoadMore (/Users/huckcarignan/Desktop/sprint04/epay-test-automation/features/support/world.js:777:6)
             at &lt;anonymous&gt;
     - And click the Manage Agency Data row that has the Mega Agency label # features/step_definitions/console_steps.js:11
     - And click Agency Accounts # features/step_definitions/console_steps.js:15
  </code></pre>
  
  <p>The selector is found the first two times, but the third, the button is not there and the selector times-out.  Instead of being caught, it goes to cucumber.</p>
  
  <p>How can I correct this so that the time-out is caught and handled by the promise?</p>