NoSuchElementError: no such element: Unable to locate element for protractor

Question

element(By.xpath(("/html/body/div[2]/div[3]/md-content/md-card/md-card-content/div/div/div/div/md-custom-table/div/md-table-container/table/thead/tr/th[3]/span"))).click();

This is the code I want to make it work.

This isxpath path of where I want to be clicked

/html/body/div[2]/div[3]/md-content/md-card/md-card-content/div/div/div/div/md-custom-table/div/md-table-container/table/thead/tr/th[3]/span

This is the error

Message:
  Failed: No element found using locator: By(xpath, /html/body/div[2]/div[3]/md-content/md-card/md-card-content/div/div/div/div/md-custom-table/div/md-table-container/table/thead/tr/th[3]/span) Stack:
  NoSuchElementError: No element found using locator:
  By(xpath, /html/body/div[2]/div[3]/md-content/md-card/md-card-content/div/div/div/div/md-custom-table/div/md-table-container/table/thead/tr/th[3]/span)
    at WebDriverError (/usr/lib/node_modules/protractor/node_modules/selenium-webdriver/lib/error.js:26:26)
    at NoSuchElementError (/usr/lib/node_modules/protractor/node_modules/selenium-webdriver/lib/error.js:241:26)
    at /usr/lib/node_modules/protractor/built/element.js:717:27
    at ManagedPromise.invokeCallback_ (/usr/lib/node_modules/protractor/node_modules/selenium-webdriver/lib/promise.js:1379:14)
    at TaskQueue.execute_ (/usr/lib/node_modules/protractor/node_modules/selenium-webdriver/lib/promise.js:2913:14)
    at TaskQueue.executeNext_ (/usr/lib/node_modules/protractor/node_modules/selenium-webdriver/lib/promise.js:2896:21)
    at /usr/lib/node_modules/protractor/node_modules/selenium-webdriver/lib/promise.js:2775:27
    at /usr/lib/node_modules/protractor/node_modules/selenium-webdriver/lib/promise.js:639:7
    at process._tickCallback (internal/process/next_tick.js:103:7)Error
    at ElementArrayFinder.applyAction_ (/usr/lib/node_modules/protractor/built/element.js:403:27)
    at ElementArrayFinder._this.(anonymous function) [as click] (/usr/lib/node_modules/protractor/built/element.js:101:30)
    at ElementFinder.(anonymous function) [as click] (/usr/lib/node_modules/protractor/built/element.js:740:22)
    at Object.<anonymous> (/home/vegan/hb-productupload/gateway/src/test/javascript/e2e/account/productDashboard/productDashboardControllerSpec.js:36:47)
    at /usr/lib/node_modules/protractor/node_modules/jasminewd2/index.js:94:23
    at new ManagedPromise (/usr/lib/node_modules/protractor/node_modules/selenium-webdriver/lib/promise.js:1082:7)
    at controlFlowExecute (/usr/lib/node_modules/protractor/node_modules/jasminewd2/index.js:80:18)
    at TaskQueue.execute_ (/usr/lib/node_modules/protractor/node_modules/selenium-webdriver/lib/promise.js:2913:14)
    at TaskQueue.executeNext_ (/usr/lib/node_modules/protractor/node_modules/selenium-webdriver/lib/promise.js:2896:21)
    at /usr/lib/node_modules/protractor/node_modules/selenium-webdriver/lib/promise.js:2820:25
  From: Task: Run it("should be able to check product dashboard as a cta") in control flow
    at Object.<anonymous> (/usr/lib/node_modules/protractor/node_modules/jasminewd2/index.js:79:14)
    at /usr/lib/node_modules/protractor/node_modules/jasminewd2/index.js:16:5
    at ManagedPromise.invokeCallback_ (/usr/lib/node_modules/protractor/node_modules/selenium-webdriver/lib/promise.js:1379:14)
    at TaskQueue.execute_ (/usr/lib/node_modules/protractor/node_modules/selenium-webdriver/lib/promise.js:2913:14)
    at TaskQueue.executeNext_ (/usr/lib/node_modules/protractor/node_modules/selenium-webdriver/lib/promise.js:2896:21)
    at /usr/lib/node_modules/protractor/node_modules/selenium-webdriver/lib/promise.js:2775:27
  From asynchronous test: 
  Error
    at Suite.<anonymous> (/home/vegan/hb-productupload/gateway/src/test/javascript/e2e/account/productDashboard/productDashboardControllerSpec.js:33:9)
    at Object.<anonymous> (/home/vegan/hb-productupload/gateway/src/test/javascript/e2e/account/productDashboard/productDashboardControllerSpec.js:8:1)
    at Module._compile (module.js:413:34)
    at Object.Module._extensions..js (module.js:422:10)
    at Module.load (module.js:357:32)
    at Function.Module._load (module.js:314:12)

1 spec, 1 failure Finished in 13.16 seconds

[15:19:25] I/launcher - 0 instance(s) of WebDriver still running
[15:19:25] I/launcher - chrome #01 failed 1 test(s)
[15:19:25] I/launcher - overall: 1 failed spec(s)
[15:19:25] E/launcher - Process exited with error code 1

So for same place, this is html:

<span translate="" class="ng-scope ng-binding">Number of Products</span>

This is the selector

body > div.site-content > div.layout-column.flex > md-content > md-card > md-card-content > div > div > div > div > md-custom-table > div > md-table-container > table > thead > tr > th.md-column.ng-scope.ng-isolate-scope.flex.md-sort.md-active > span

For same span, this can click

 dashboardPageObject.element.all(by.css('[md-order-by="count"]')).get(1);.click();
            browser.driver.sleep(28);
            dashboardPageObject.element.all(by.css('[md-order-by="count"]')).get(1);.click();

It clicks 2 times but it does not wait 28 seconds.

I don't care selector for the xpath or css. For example for another

/html/body/div[2]/div[3]/header/md-content/md-tabs/md-tabs-wrapper/md-tabs-canvas/md-pagination-wrapper/md-tab-item[5]/span

This works

 element(by.xpath('/html/body/div[2]/div[3]/header/md-content/md-tabs/md-tabs-wrapper/md-tabs-canvas/md-pagination-wrapper/md-tab-item[5]/span'));

Answer 1

1. This is po file

   import { element, by, ElementArrayFinder, ElementFinder } from 'protractor';
   
   export class scopePos {
     greet() {   
           element(by.xpath("//scope-setup-panel/mat-expansion-panel/div/div/div/div[1]/div[2]/div[2]")).click()// click is not working here
       }
   }
   

2. Step definition file

   export default function () {
       this.When(/^I verified the event scope card$/, function (next) {
         //z created an object of po file and calling 
         z.greet()         
         next();
       });
   }
   

Answer 2

First, as I mentioned above in the comments, the sleep() timer takes milliseconds, not seconds. So you are only waiting 0.28 seconds with that command. Extend it to 28000 if you really want to sleep for 28 seconds.

However, that's not the best approach. You should use implicit waits in the form of Expected Conditions so your tests are efficient and execute in a consistent manner.

You'll have to decide which method works best for you depending on the nature of that element you are trying to click, but you probably will end up using presenceOf() or visibilityOf().

presenceOf() waits for something to be appended to the DOM

visibilityOf() takes an existing element and waits for it to be visible.

Finally, xpath is not a great locator. It may work now in your current test, but xpath is very brittle as it's subject to easily change as development continues. I'd advise you to find another way to locate that element, since there aren't many attributes on that particular element I would probably choose cssContainingText()

So combining the above:

var el = element(by.cssContainingText('span', 'Number of Products'));
var EC = protractor.ExpectedConditions;
browser.wait(EC.presenceOf(el), 5000);  // maximum wait of 5 seconds
expect(something).toEqual(your expected result);