CODEWITHSUNDEEP
javascriptjqueryseleniumwebdriver-io
ChanChow
ChanChow

Reputation: 1366

Cannot read property $$ of undefined javascript webdriverio

I am trying to access a nested webelement using webdriverio framework.

I have the following code

function selectSales(sfilters, salesflowName) {
  const sflow = $$("app-filters-manager app-salesflow-panel mat-expansion-panel").find(element => {
        return element.getText() === salesflowName;
  });

/* The below is to select the checkbox from a list of checkboxes under 
the parent */  
sfilters.forEach(fil => {
    sflow.$$("mat-list-option").find(el => { //* > This is where I am getting error.
        return el.getText().includes(fil);
    }).$('mat-pseudo-checkbox').click();
  });
}

I am getting Cannot read property '$$' of undefined

Not sure why the error shows up. 'sflow' is the parent webelement and accessing the child elements using $$("mat-list-option") is where the error appears.

Upvotes: 0

Views: 3940

Answers (2)

Vojtech Cerveny
Vojtech Cerveny

Reputation: 696

It looks that your selector is not valid. Shouldn't it be like this (selector for looking for class)? 

const sflow = $$(".app-filters-manager .app-salesflow-panel .mat-expansion-panel").find(element => {
        return element.getText() === salesflowName;`

Same in other selectors. And find should return one children, so it is OK.

But if it is valid, are you sure, that elements are in DOM?

Upvotes: 0

IKA
IKA

Reputation: 690

Your sflow variable is undefined meaning that the following expression does not return anything. 

$$("app-filters-manager app-salesflow-panel mat-expansion-panel").find(element => {
        return element.getText() === salesflowName;
  });

This can happen because of several things:

  1. Are you sure the $$("app-filters-manager app-salesflow-panel mat-expansion-panel") returns the parent of the element you are looking for? Is the selector correct?

  2. Remember that find() goes through and finds the children of your $$("app-filters-manager app-salesflow-panel mat-expansion-panel") selector. It may also return multiple children. If that selector is already the element you want to use then remove the following part:

const sflow = $$("app-filters-manager app-salesflow-panel mat-expansion-panel").find(element => { return element.getText() === salesflowName; });

  1. Make sure you are passing in the right value for salesflowName param

  2. element.getText() might be returning some text with whitespace in it. Try element.getText().trim()

Basically you need to make sure that the value of sflow variable gets initialized. Whether its the problem with your selector, salesflowName param or whitespace failing the equality test needs to be investigated by debugging.

Good luck!

Upvotes: 1

Related Questions