Why You Can Only Use elementByCssSelector Once on TheIntern.io/Selenium

I'm encountering a peculiar problem while running a functional test with Selenium (using the Intern.io framework) where only the first element is being recognized; any subsequent element I try to access throws an error:

Error: Error response status: 7

The error message translates to:

{summary:'NoSuchElement',
detail:'An element could not be located on the page using the given search parameters.'}

This issue is quite frustrating as I am certain that the element is present on the page.

Below is my simple failing functional test:

define([
  'intern!object',
  'intern/chai!assert',
  'require'
  ], function (registerSuite, assert, require) {
    registerSuite({
      name: 'search',

      'geocode search test': function () {
        return this.remote
        .get('http://localhost:8181')
        .elementByCssSelector('.modal-close').clickElement()
        .elementByCssSelector('#location_search_field').clickElement().type('San Francisco, CA')
      }
    });
});

The test successfully finds and clicks the .modal-close element, but encounters an error while trying to locate the #location_search_field element (resulting in the aforementioned error).

If I remove the

.elementByCssSelector('.modal-close').clickElement()
line, Selenium can easily find the location input field and populate it with the specified string.

I have also attempted using the

elementById('location_search_field')
method.

For your reference, here is a snippet of my environments array:

environments: [
    { 
      browserName: 'firefox',
      platform: 'MAC',
      cssSelectorsEnabled: true,
      javascriptEnabled: true,
      applicationCacheEnabled: true,
      webStorageEnabled: true
    }
  ]

Any assistance would be highly appreciated.

Answer №1

Just wanted to share the solution I found after figuring it out on my own. I discovered that by adding .end() after each browser action, the test runs smoothly as expected.

Below is the updated code snippet from my example:

define([
  'intern!object',
  'intern/chai!assert',
  'require'
  ], function (registerSuite, assert, require) {
    registerSuite({
      name: 'search',

      'geocode search test': function () {
        return this.remote
          .get('http://localhost:8181')
            .elementByCssSelector('.modal-close').clickElement()
              .end()
            .elementByCssSelector('#location_search_field').clickElement().type('San Francisco, CA')
      }
    });
});

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

Vuetify Error - "Attempting to access 'extend' property of an undefined object"

Upon installing Vuetify, I encountered an error in the console. My webpack version is v3.6 Uncaught TypeError: Cannot read property 'extend' of undefined at Module../src/mixins/themeable/index.ts (index.ts:21) at __webpack_require__ (boo ...

`When components are nested, the content is transcluded from the parent's scope through ng-content

I am facing a challenge with my complex page template in Angular 2/4. Within this template, I have 3 components nested within each other: page.component, header.component, and header.title.component. Each of these components has custom selectors set accor ...

What is the process for setting the binary path for Firefox/Chrome in Jmeter's WebDriver Sampler?

Currently, I am in the process of setting up a webdriver sampler in JMeter within my company's network. Despite following all the recommendations provided in this helpful link [1]: https://www.blazemeter.com/blog/webdriver-sampler-your-top-ten-questio ...

Tips for storing the state using Localstorage?

Greetings to the person reading this message! I am relatively new to programming and I have a query... I created a Navigation bar: body > div > nav > div > ul > li*10 I have implemented the styling in CSS. //Navigation Bar const list = ...

At what point does the delay become too significant to make synchronous computation a viable option in NodeJS?

I am currently developing a node.js addon for cryptographic computations that may require 1 μs to 20 μs. The decision now lies between implementing this functionality synchronously or asynchronously (using a background worker). It is clear that operatio ...

How can I remove a dynamically added <tr> element using jQuery?

I insert the <tr> into the <tbody> for (var i = 0 ;i < 12 ;i++){ $(`<tr><td>test</td></tr>`).appendTo('#songsTbody'); } within this HTML structure. <tbody id="songsTbody"> </tbody> ...

Ways to implement CSS with javascript

I'm using PHP to retrieve data from my database and then leveraging Javascript to enable users to add it. However, I am facing challenges in making a div change its background color and apply borders. <div class="displayedItems"></div> &l ...

I am unable to locate the Selenium element in Java

I am facing an issue. I am trying to click a button: <label><input type="radio" name="choose" value="domain" data-dojo-attach-point="focusNode" data-dojo-attach-event="ondijitclick:_onClick" tabindex="0" id="mailbox-new_mailboxChooseDomainInput"& ...

Navigate to a refreshed version of the page with varying parameters using React Navigation

Currently, I am utilizing React Navigation for navigating between different pages within my app. One of the pages is the Profile page which displays a user info card along with their posts. Within this Profile component, I have integrated the Post componen ...

The componentDidUpdate function fails to trigger in React Native after modifying the reference of its prop

In this section of my parent component, I am invoking my child component AttachmentField. configurableField.attachments.map((item, i) => { if (item.type.includes("pdf")) { const url ...

React Table component displaying data fetched from API is encountering errors when trying to access properties of null

While using React-Material-Table, I encountered an issue where some values are null, resulting in the error message "Uncaught TypeError: Cannot read properties of null (reading 'name')". 1. How can I address this problem? 2. Is there a way to se ...

The knockout afterRender event triggers only on the initial rendering

Here is a basic ViewModel structure: export class ViewModel { public arr : KnockoutObservableArray<Dtos>; constructor() { this.arr = ko.observableArray<Dtos>(null); ko.applyBindings(this); this.init(); } ...

Transforming vanilla JavaScript into jQuery

Is there a more efficient way to write this code using jQuery? It's functioning properly in Firefox but not in Safari or Chrome without any error messages, making it difficult for me to troubleshoot. Any suggestions or insights would be greatly appre ...

Sending raw post data in a Rails functional test: A step-by-step guide

I am in need of sending raw post data, such as unparameterized JSON, to one of my controllers for testing purposes: class CustomOrderUpdateControllerTest < ActionController::TestCase test "sending json data" do post :update, '{"foo":"bar", " ...

Using Selenium to submit an hcaptcha captcha token to Discord in order to register a new account

While utilizing python selenium to register for a Discord account (), I encountered an hcaptcha challenge. To tackle this, I have integrated a captcha API (2captcha/capmonster) that provides me with a captcha token to enter into the g-captcha-response text ...

Revoke the prior invocation of the Google Maps geocoding function

While working on implementing an autocomplete with JavaScript and the Google Maps geocode method (using the keyup event on input), I have encountered a problem where I sometimes receive the results of the previous search instead of the current one. I am l ...

Possible issue with accurate indexing causing caption error with API images in React

Continuing from: Implementing a lightbox feature in react-multi-carousel for my ReactJS app My application utilizes react-images for the lightbox functionality and react-carousel-images for the carousel. The API provides a title and image data. The issue ...

What is the proper way to incorporate scripts into my AngularJS controller?

I am encountering an issue that may be stemming from my incomplete understanding of AngularJS. My goal is to incorporate some JS scripts into my HTML. <head> <script src="https://code.highcharts.com/highcharts.js"></script> <script sr ...

Error: React is throwing a SyntaxError because a ")" is missing in the argument list

While working on a React-typescript project using Vite, I encountered an issue where my page was displaying blank and showing the error : Uncaught SyntaxError: missing ) after argument list (at main.tsx:6:51) This error was found in the main.tsx file : im ...

A large canvas displaying a single optimized image

Hello, I have a large image on the canvas that measures around 10,000 pixels by 10,000 pixels. I am looking for zoom in/out functionality. Can you recommend what technology I should use? Should I consider splitting the image into smaller segments like Go ...