I.click(text, context) not working with Puppeteer

What are you trying to achieve?

I want to click a button in a test using I.click(buttonText, ‘button’)

What do you get instead?

> node_modules\\.bin\\codeceptjs run --grep "Handytarife"                                                                 
CodeceptJS v1.2.1                                                                                                         
Using test root "C:\Users\stefan.huber\projects\e2e-dashboard-client\examples\codeceptjs"                                 
                                                                                                                          
Search for Handytarife --                                                                                                 
 × When I search for "Handytarife" without specifying any details Then I will get a list of various tariffs in 3533ms     
                                                                                                                          
-- FAILURES:                                                                                                              
                                                                                                                          
  1) Search for Handytarife                                                                                               
       When I search for "Handytarife" without specifying any details Then I will get a list of various tariffs:          
     Clickable element jetzt vergleichen was not found inside element button                                              
                                                                                                                          
  Scenario Steps:                                                                                                         
                                                                                                                          
  - I.click("jetzt vergleichen", "button") at Test.Scenario (features\search-products_test.js:25:7)                       
  - I.refreshPage() at Test.Scenario (features\search-products_test.js:20:13)                                             
  - I.setCookie({"domain":".check24.de","httpOnly":false,"name":"c24cb","path":"/","secure":false,"value":"1"}) at Test.Sc
enario (features\search-products_test.js:19:13)                                                                           
  - I.amOnPage("https://www.check24.de/handytarife") at Test.Scenario (features\search-products_test.js:9:7)              
                                                                                                                                                                                                                                                                                                                                                                            
  Run with --verbose flag to see NodeJS stacktrace                                                                                                                                                                                                
                                                                                                                          
  FAIL  | 0 passed, 1 failed   // 4s                                                                                      

Provide test source code if related

const assert = require('assert')

Feature('Search for Handytarife')

Scenario(`When I search for "Handytarife" without specifying any details Then I will get a list of various tariffs`, 
async (I) => {
    const toNumber = arr => arr.map(priceAsStr => Number(priceAsStr.replace(' €', '').replace(',', '.')))

    I.amOnPage('https://www.check24.de/handytarife')

    const cookieDialog = {
        domain: '.check24.de',
        httpOnly: false,
        name: 'c24cb',
        path: '/',
        secure: false,
        value: '1'
      }   
    await I.setCookie(cookieDialog)
    await I.refreshPage()  

    // Test will fail here
    I.click('jetzt vergleichen', 'button')

    I.waitInUrl('/handytarife/vergleich')
    I.see('Handytarife im Vergleich', 'h1')
    I.seeElement('//filter')
    I.seeElement('product-item')
})

As far as I can see in lib/helper/puppeteer the problem is in findElements(…) and the following code will fix the above problem:

async function findElements(matcher, locator) {
  // console.log('findElements', await (await matcher.getProperty('innerText')).jsonValue(), locator)
  locator = new Locator(locator, 'css');
  if (!locator.isXPath()) {

    const matcherInnerText = await (await matcher.getProperty('innerText')).jsonValue();
    if (matcherInnerText.indexOf(locator) >= 0) return [matcher]

    return matcher.$$(locator.simplify());
  }

  return matcher.$x(locator.value);
}

Details

• CodeceptJS version: 1.2.1
• NodeJS Version: 8.9.4
• Operating System: Windows
• Puppeteer
• Configuration file:

[sergejkaravajnij]

You are trying to click span element, and it’s not generally clickable. So, you should use explicit way to point the element

This will do the trick (I used xpath to make finding text easier)

Feature('Click')

Scenario(`Test click(text, context) with puppeteer`,
  async (I) => {
    I.amOnPage('https://www.check24.de/versicherungen/')
    I.click("//*[contains(text(), 'KFZ-Versicherung')]", '.box');
  })

[panpan-lin]

Came across the same issue because the text is in a div rather than a clickable element such as a button. Solved by specifying the element to click instead of the text content itself.