How to fix Invalid locator error in protractor-cucumber framework?

Question

Getting invalid locator while running protractor-cucumber framework. I have set up protractor-cucumber framework with the required dependencies.

Before getting this error, protractor was not able to find step definitions for feature files. So, I downgraded the cucumber version from 4.2.1 to 1.3.3 and I was able to find step definition but getting the invalid locator error even if I have provided valid locator for a button class (.button-large.button-primary.has-shield.has-shadow).


export default function() {
  this.Given(/^I am on the "([^]*)" page$/, { timeout: 40 * 1000 }, async function homepage(page) {
      console.log(page);
      await browser.get('http://www.angularjs.org');
      const ele = await element(by.css('.button-large.button-primary.has-shield.has-shadow'));
      return element(ele).click();
    });
}```

Getting below error
``` TypeError: Invalid locator
         at Object.check [as checkedLocator] (/mnt/c/Angular/node_modules/protractor/node_modules/selenium-webdriver/lib/by.js:275:9)
         at thenableWebDriverProxy.findElements (/mnt/c/Angular/node_modules/protractor/node_modules/selenium-webdriver/lib/webdriver.js:1041:18)
         at ptor.waitForAngular.then (/mnt/c/Angular/node_modules/protractor/built/element.js:159:44)
         at process._tickCallback (internal/process/next_tick.js:68:7)```
Protractor should run above code as it is valid locator.

Package.json

    {
      "name": "test",
      "version": "1.0.0",
      "description": "test",
      "main": "config.js",
      "dependencies": {
        "babel-cli": "6.26.0",
        "babel-core": "6.26.3",
        "babel-loader": "6.4.1",
        "babel-plugin-add-module-exports": "0.2.1",
        "babel-plugin-transform-es2015-modules-commonjs": "6.26.2",
        "babel-plugin-transform-runtime": "^6.23.0",
        "babel-polyfill": "^6.26.0",
        "babel-preset-es2015": "6.24.1",
        "babel-preset-stage-2": "6.24.1",
        "babel-register": "6.26.0",
        "chai": "^4.2.0",
        "chai-as-promised": "^7.1.1",
        "chai-smoothie": "^0.3.2",
        "chromedriver": "2.40.0",
        "cucumber": "1.3.3",
        "protractor": "^5.3.2",
        "protractor-cucumber-framework": "^5.0.0",
        "protractor-helper": "^3.7.8",
        "selenium-webdriver": "2.53.3"
      },
      "scripts": {
        "test": "protractor config.js"
      },
      "author": "",
      "license": "ISC",
      "devDependencies": {
        "babel-core": "^6.26.3"
      }
    }

Yevhen Laichenkov Yevhen Laichenkov · Accepted Answer · 2019-07-08T09:20:35

It happens because you are trying to pass the ElementFinder to the element function.

on this line:

      return element(ele).click();

Try this:

  export default function() {
    this.Given(/^I am on the "([^]*)" page$/, { timeout: 40 * 1000 }, async function homepage(page) {
      console.log(page);
      await browser.get('http://www.angularjs.org');
      return await element(by.css('.button-large.button-primary.has-shield.has-shadow')).click();
    });
  }

or if you want as your example:

 export default function() {
    this.Given(/^I am on the "([^]*)" page$/, { timeout: 40 * 1000 }, async function homepage(page) {
      console.log(page);
      await browser.get('http://www.angularjs.org');
      const ele = await element(by.css('.button-large.button-primary.has-shield.has-shadow'));
      return ele.click();
    });
  }

How to fix Invalid locator error in protractor-cucumber framework?

2 Answers