Nightwatch(PageObject) + TypeScript encountering issues finding elements with the @ symbol

During the course of execution, I encountered an issue with linking locators using the @ symbol from elements.

An error occurred: Could not find element: "@queryInput" using: xpath

Here is the code snippet:

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;

For the complete code, you can visit this link

If you are interested in checking out the specific file, you can click on this link

Answer №1

Passing the nightwatch client in your page object class is unnecessary because it is already accessible to you using either this or this.api. To see all available properties, try logging this to the console. This approach works for JavaScript and should work similarly for TypeScript.

To make your selector function properly, consider updating it as shown below:


enterQuery: (query: string) => {
    return this
      .waitForElementVisible('//input[@name="q"]', 5000)
      .setValue('@queryInput', [query, client.Keys.ENTER])
      .waitForElementVisible('//*[@id="res"]', 5000);
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to connect a chosen observable to a freshly inserted item?

I'm completely new to knockout. I have this sample set up where it will: Fill the left box with a list of items When you select an item in the left box, display its details in the right box Seems like everything is working fine so far. But I want t ...

After a short period of time, the Next.js server will shut down on its own when executing the command "npm run dev."

I am trying out Next.js for the first time and followed the installation instructions from the official page. npx create-next-app@latest hello-word However, after installing and running "npm run dev" or "yarn dev", the server starts on port 3000 but then ...

Responsive HTML code for a textarea, button, and table

I'm currently developing a website that includes a textarea, button, and table within the body content. The responsiveness of my content works well, except for extremely narrow displays such as mobile phones. In such cases, the table does not wrap pr ...

Tips on hiding specific table rows in two separate tables based on the chosen option from a dropdown menu

How do I hide table rows based on dropdown selection? The first table has a dropdown with two options: Current State and Future State. If I select Current State, I want to show or hide specific rows in the 2nd and 3rd tables. I am using IDs for these row ...

Issue with hydration when logging in with Next-Auth in NextJS 13.4

Step-by-step Instructions: 'node -v' -> v18.16.1 'npx -v' -> 9.8.0 To start, I created a new Next.js app by running npx create-next-app@latest in the terminal within my app folder. Here is a link to the package.json file. Nex ...

What steps can I take to stop Highcharts from showing decimal intervals between x-axis ticks?

When the chart is displayed, I want to have tick marks only at integer points on the x-axis and not in between. However, no matter what settings I try, I can't seem to get rid of the in-between tick marks. Chart: new Highcharts.chart('<some i ...

Tool for controlling the layout of the viewport with Javascript

I have experience using ExtJS in the past to create dashboards, and one of my favorite features is the full-screen viewport with a border layout. This allows for easy splitting of a dashboard into panels on different sides without creating excessive scroll ...

Unusual navigation patterns in Angular

https://i.sstatic.net/kdh4A.png My Mean app is set up with the Angular app residing in the '/dashboard' path. The home page of the app works fine. Reloading the app returns the page it was on. Even routes with '/dashboard/anything/anything& ...

Struggling to send information through axios with formData, but it appears to be devoid of content

I'm currently working with Vue3 and axios to submit a form using FormData. However, I am facing an issue where the form data is empty and not being passed. {"formData":{}} Here's my code snippet: const formData= new FormData(); formD ...

Endlessly streaming data is requested through HTTP GET requests

I am facing an issue with my code where it requests data endlessly. The service I have retrieves data in the form of an Array of Objects. My intention is to handle all the HTTP requests, mapping, and subscriptions within the service itself. This is because ...

Error in HTML code when trying to incorporate a JavaScript file

I'm struggling with something seemingly simple - including a JavaScript file in my flat HTML page. Here is the content of my JavaScript file: <script> $(document).ready(function() { $('div').css('background', 'red& ...

For every iteration, verify the presence of the image

I am currently working on a foreach loop to iterate over the data returned by an ajax call. Within this loop, I am checking if each record has an associated image. Code for Checking Image Existence: function checkImageExists(url, callback) { var img ...

What is the best way to populate this dynamic form with data retrieved from the server?

I found a helpful Bootsnipp that utilizes BootStrap.JS to generate dynamic fields and collect data from forms. If, after saving the form, I receive JSON data from the server in key-value pairs, how can I build this dynamic form so that users can easily up ...

Eliminating specific classes targeted by a jQuery attribute selector within the outcome of another jQuery attribute selector

I am facing a simple issue where I need to target all classes that end with a specific string on elements within a class ending with another specific string, and then remove those targeted classes. While the following code is close to what I want, it does ...

Is there a pure JavaScript solution to replace jQuery's .prev() function?

Looking for a JavaScript alternative to this jQuery code: $(".q-block-container").prev(".sub-block-container").css("border-bottom","none"); I am seeking a pure JavaScript solution that selects the previous sibling ONLY if it matches a specific selector ( ...

Encountering an issue with NgRx store where the property 'products' is not recognized on the type 'ActionCreatorProps<{ payload: Product[]; }>' while attempting to build a reducer

Currently, I am delving into the @ngRx/store package within my Angular 14 App. My primary goal is to establish a basic store capable of containing a simple object Array. Here is an excerpt from my action file: import { Product } from 'src/app/data-mod ...

Utilize the Algolia search-insights library in conjunction with React

Trying to integrate the Search-Insights Library from Algolia with React using npm for installation instead of just adding it to the header as shown in the example. Example of implementation in React Click here for React implementation example <script ...

There is an issue with the JSON format being received by fetch in JS when using json_encode in php

Recently, I encountered an issue with my JavaScript function that retrieves data from a PHP page. In the JS code block: fetch("print.php) .then(function (r) { return r.json() }) .then(function (values) { ...... ...... ...

Adding dynamic colors to nested and sibling divs with a specific class

I am facing an issue with applying alternating colors to nested divs. The challenge is that these divs are not always siblings within the list items. Here is the HTML structure: <ul> <li> <div class="R">Bat</div> ...

Issue: Inadequate parameters have been supplied for the localized pathname (getPathname()). This problem arose after the inclusion of "next-intl/routing" module

After implementing the config file and replacing : Navigation File import { createLocalizedPathnamesNavigation, Pathnames } from 'next-intl/navigation'; With : Config File import {Pathnames, LocalePrefix} from 'next-intl/routing';} ...