Having trouble clicking or submitting a button with Selenium Webdriver in JavaScript

Having trouble with clicking or submitting a button in my test script using selenium-webdriverjs.

Using the following NPM modules:

  • selenium-webdriver
  • mocha
  • chai
  • chai-as-promised

After filling out the form, I am unable to click the button to proceed to the dashboard. The button is highlighted but not responding to mouse actions.

Here are screenshots taken manually during the test:

after both email and password sections filled, clicked remember me button

mouse hover over sign-in button

In the last image, I'm trying to click the sign-in button while hovering over it due to intended CSS effects but unable to advance to the next page.

Full test script:

var driver = require('selenium-webdriver'),
      chai = require('chai'),
    expect = chai.expect;

    chai.use(require('chai-as-promised'));

describe('Webdriver - Admin Page Tests - ', function() {

    beforeEach(function() {
        this.timeout(10000);
        this.driver = new driver.Builder().withCapabilities(driver.Capabilities.firefox()).build();
        return this.driver.get('https://admin.example.us/en-US/sign-in');
    });

    afterEach(function() {
        return this.driver.quit();
    });

    describe('Login verification -', function() {

    it('filling in credentials and accessing the portal', function () {
            this.driver.findElement({
                css: '#app > div > div > div > div > form > div:nth-child(2) > input'
            }).sendKeys('<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="6d19081e192d08150c001d0108430e0200">[email protected]</a>');

            this.driver.findElement({
                css: '#app > div > div > div > div > form > div:nth-child(3) > input'
            }).sendKeys('example');

            this.driver.findElement({
                css: '#app > div > div > div > div > form > div:nth-child(4) > input[type="checkbox"]'
            }).click();

            var formButton = this.driver.findElement({
                css: '#app > div > div > div > div > form > div:nth-child(5) > button'
            });

            this.driver.actions()
                .mouseMove(formButton)
                .click()
                .perform();

            return expect(this.driver.getCurrentUrl()).to.eventually.equal('https://admin.example.us/en-US/dashboard');
        });
    });
});

Error received when running test script:

1) Webdriver PC6 - Admin Page Tests -  Login verification - filling in credentials and accessing the portal:

      AssertionError: expected 'https://admin.example.us/en-US/sign-in' to equal 'https://admin.example.us/en-US/dashboard'
      + expected - actual

      -https://admin.example.us/en-US/sign-in
      +https://admin.example.us/en-US/dashboard

The error confirms the issue of being unable to click the sign-in button properly and progress to the next page.

Login form structure (stripped of styling and react-ids):

<div>
  <h2>
    <span>Sign In</span>
    <span></span>
    <button type="button">
      <div>
        <span class="material-icons">help</span>
        <span>help</span>
      </div>
    </button>
  </h2>
  <form name="auth">
    <div class="Form-errorSummary">
      <ul></ul>
    </div>
    <div >
      <label for="mui-id-1">E-mail</label>
      <input required="" name="email" value="" type="text" id="mui-id-1">
      <hr><hr>
    </div>
    <div>
      <label for="mui-id-2">Password</label>
      <input name="password" required="" type="password" id="mui-id-2">
      <hr><hr>
    </div>
    <div>
      <input type="checkbox" name="remember">
      <div>
        <div>
        </div>
        <div>
          <div>
            <svg viewBox="0 0 24 24">
              <path d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"></path>
            </svg>
            <svg viewBox="0 0 24 24">
              <path d="M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z">
              </path>
            </svg>
          </div>
          <div>
          </div>
          <div>
          </div>
        </div>
        <label for="mui-id-48">Remember me</label>
        <div></div>
      </div>
    </div>
    <div>
      <button tabindex="0" type="submit">
        <div>
          <div>
            <span>Sign In</span>
          </div>
        </div>
      </button>
    </div>
  </form>
</div>

Tried other methods like using click function on findElement such as:

this.driver.findElement({
  css: '#app > div > div > div > div > form > div:nth-child(5) > button'
}).click();

Also attempted sendKeys on findElement with these lines:

this.driver.findElement({
  css: '#app > div > div > div > div > form > div:nth-child(5) > button'
}).sendKeys(driver.Key.ENTER);

and

this.driver.findElement({
  css: '#app > div > div > div > div > form > div:nth-child(5) > button'
}).sendKeys(driver.Key.RETURN);

While in chrome dev tools, was able to click the button using vanilla JS with the line:

document.querySelector('#app > div > div > div > div > form > div:nth-child(5) > button').click()

However, executeScript in testing script did not work:

this.driver.executeScript("document.querySelector('#app > div > div > div > div > form > div:nth-child(5) > button').click()");

Continuously getting stuck on the sign in page without being able to proceed further.

Answer №1

I found a solution to pass the test by incorporating a sleep function to pause execution until the page fully loads, ensuring that all elements and expectations are present:

this.driver.sleep(250)

After experimenting with different time intervals, I discovered that 250ms was the optimal duration for my requirements without excessively prolonging the tests.

Below is the implementation of this approach in my code:

var driver = require('selenium-webdriver'),
      chai = require('chai'),
    expect = chai.expect;

    chai.use(require('chai-as-promised'));

describe('Webdriver - Admin Page Tests - ', function() {

    beforeEach(function() {
        this.timeout(10000);
        this.driver = new driver.Builder().withCapabilities(driver.Capabilities.firefox()).build();
        return this.driver.get('https://admin.example.us/en-US/sign-in');
    });

    afterEach(function() {
        return this.driver.quit();
    });

    describe('Login verification -', function() {

    it('entering credentials and navigating to the portal', function () {
        this.driver.sleep(250);

        this.driver.findElement({
            css: '#app > div > div > div > div > form > div:nth-child(2) > input'
        }).sendKeys('<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="255140565165405d44485549400b4648">[email protected]</a>');

        this.driver.findElement({
            css: '#app > div > div > div > div > form > div:nth-child(3) > input'
        }).sendKeys('example');

        this.driver.findElement({
            css: '#app > div > div > div > div > form > div:nth-child(4) > input[type="checkbox"]'
        }).click();

        var formButton = this.driver.findElement({
            css: '#app > div > div > div > div > form > div:nth-child(5) > button'
        });

        this.driver.actions()
            .mouseMove(formButton)
            .click()
            .perform();

        this.driver.sleep(250);

        return expect(this.driver.getCurrentUrl()).to.eventually.equal('https://admin.example.us/en-US/dashboard');
        });
    });
});

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

"Troubleshooting: React Component Failing to Display Data Retrieved from API

Currently facing an issue in my React project where I am struggling to display fetched data from an API in my Movies component. Despite logging the data correctly in the console, it doesn't seem to show up on the page. Seeking assistance in identifyin ...

The JavaScript invocation of a page method resulted in an error 500, with JSON response

I am utilizing an autocomplete control which can be found here: After making some modifications, my code looks like this: var json_options; json_options = { script:'ReportSearch.aspx/GetUserList?json=true&limit=6&', ...

Styling a <slot> within a child component in Vue.js 3.x: Tips and tricks

I'm currently working on customizing the appearance of a p tag that is placed inside a child component using the slot. Parent Component Code: <template> <BasicButton content="Test 1234" @click="SendMessage('test') ...

When utilizing Selenium for capturing screenshots, an error message may occur stating: "TypeError: get_screenshot_as_file() requires 2 arguments but only 1 was provided."

I attempted to capture a screenshot of a specific link using Selenium webdriver, but I encountered the following issue: browser.get_screenshot_as_file() TypeError: get_screenshot_as_file() takes exactly 2 arguments (1 given) Here is the code ...

What role does JavaScriptExecutor play within the Selenium framework?

Can you explain the concept of JavaScript Executor in Selenium WebDriver? How is it utilized and what are some practical applications within Selenium WebDriver? Please provide an illustrative example for better understanding. ...

Retrieving a specific value from a collection of nested arrays containing objects

Having trouble extracting values from fields and have tried various methods like nesting the map function and concatenating fields without success. I have an object with a structure similar to this: [{ name: 'sean', age: 26, address: ...

A guide to fetching a JSON Object from a URL using Node.js and Express

As a newcomer to Node.js and Express, I am venturing into my first real project with these technologies. In this simple Node.js/Express project, my goal is to retrieve a JSON object from a URL. Additionally, I plan to create another URL that shows HTML co ...

Ways to dynamically combine a group of objects

I'm grappling with a challenge involving an array containing two objects. After using Promise All to fetch both of these objects, I've hit a roadblock in trying to merge them dynamically. Despite experimenting with various array methods like map, ...

What steps do I need to take to create a delete button that will effectively remove a bookmark from an array?

Currently, I have created a form that allows users to input the website name and URL. Upon clicking the submit button, the output displays the website name along with two buttons: 1. one for visiting the site 2. another for removing the bookmark using on ...

What could be causing the issues with SSL certificates when using Node.js/Express-TypeScript?

I'm currently in the process of transitioning a project's backend from JavaScript (Node.js/Express) to TypeScript. However, I've encountered an unusual issue where FS's readFileSync is unable to access the key.pem or cert.pem files in t ...

Using Selenium to Interact with an Existing Web Application in the Chrome Browser

Is there a way to automate an already opened application in the Chrome web browser using Selenium and Python web driver? The application is highly secure, and opening it in incognito mode triggers a verification code sent to my phone. This renders Seleni ...

Exploring nested rows with Angular's ui.grid component

After spending several hours attempting to implement a nested table within a single row using ui.grid, I am still unable to achieve the desired result. $scope.gridOptions.columnDefs = [ {name: 'id'}, {name: 'categoryName'}, ...

Utilize Vue.js to sort by price bracket and category

Hello, I am currently new to working with Vue.js and I am attempting to create two filters - one for price range and the other for genre. Any guidance or assistance would be greatly appreciated. Below is a snippet of my code: ul class="filter-wrapper"&g ...

Attempting to discover the secret to keeping a hamburger menu fixed in place once it has been expanded

Exploring this example https:// codepen.io/ducktectiveQuack/pen/mPGMRZ I had trouble understanding the code block, so I resorted to trickery (just remove the space between the '/' and the 'c' lol) My goal is to have the hamburger men ...

Unable to establish a connection with Geckodriver

Attempting to execute the Selenium example script with Ruby on Rails, I encountered an issue when trying to run it with a proxy. Below is the code snippet: require 'rubygems' require 'bundler/setup' # require your gems as usual requir ...

Maintaining equal heights for divs in jQuery upon resizing

I have been attempting to dynamically set the height of all my divs to match the highest div upon page load and window resize. Below is the code snippet I am using: // function to equalize column heights function eqColumn(){ if ($(window).width() > ...

Headless ChromeDriver encounters ElementNotVisibleException

I am new to using Selenium. I require a headless browser as the project will be integrated with Jenkins. After some consideration, I opted for ChromeDriver in Headless mode. While utilizing ChromeDriver in regular mode, I can successfully interact with al ...

What is the method for accessing an image in JavaScript?

Currently, I am developing a currency converter for a gaming marketplace and I would like the users to be able to generate images using JavaScript. While most of the work is completed, I am facing an issue where the images are not displaying properly and i ...

The websocket connection established with apollo-server is somehow producing nonsensical output for the connection params

onConnect should receive the connectionParams supplied by the client and then validate that the token has not expired by checking the token property on the connectionParams object. On the client-side, I send these parameters in the following manner: const ...

Executing TestNG with Selenium tests through the terminal

When executing my selenium test with TestNG from the command line, I am faced with the challenge of specifying which webdriver to use as a command line argument. Currently, in my setUp() method, only the firefox driver is loaded and changing drivers requir ...