0

During execution, unable to link locator using @ symbol from elements.

ERROR: Unable to locate element: "@queryInput" using: xpath

Code:

import * as config from 'config';
import { NightWatchClient, PageObject } from 'nightwatch';

const pageConfig = config.get<IPageConfig>('pages.google');

const page: PageObject = {
  url: pageConfig.url,
  elements: {
    queryInput: { 
      selector: '//input[@name="q"]',
      locateStrategy: 'xpath'
     }
  },
  commands: [
    {
      enterQuery: (client: NightWatchClient, query: string) => {
        return client
          .waitForElementVisible('//input[@name="q"]', 5000)
          //.setValue('//input[@name="q"]', [query, client.Keys.ENTER])
          .setValue('@queryInput', [query, client.Keys.ENTER])
          .waitForElementVisible('//*[@id="res"]', 5000);
      },
    },
  ]  
};

export = page;

Complete code

Link

Jagadeesh
  • 41
  • 1
  • 8

1 Answers1

0

You don't need to pass in the nightwatch client. It is already available to you in the page object class by using this or this.api. Try dumping this to the console in your page object and you will see all the properties that are available to you. This works for JS so it should work the same way in TS.

You can get your selector to work by changing your function to something like the following:

enterQuery: (query: string) => {
    return this
      .waitForElementVisible('//input[@name="q"]', 5000)
      .setValue('@queryInput', [query, client.Keys.ENTER])
      .waitForElementVisible('//*[@id="res"]', 5000);
  }
tehbeardedone
  • 2,833
  • 1
  • 15
  • 23
  • thanks for your quick response. As I'm new to both typescript and nightwatch, finding difficulty in making change with this or this.api keyword. But I'll update the result. – Jagadeesh Apr 25 '18 at 05:56
  • It worked. Thanks for your support. Can you please help me with following query https://stackoverflow.com/questions/50029800/nightwatchpageobject-access-elements-from-different-page-object – Jagadeesh Apr 25 '18 at 19:17