The WebDriverIO browser.Click function encountered difficulty locating an element while using Chrome, but it is functioning properly on Firefox

Currently, I am utilizing WebdriverIO in combination with CucumberJS for testing purposes. The following code functions correctly in Firefox; however, I encounter errors in Chrome which display element is not clickable. I am seeking a solution using JavaScript.

this.Then('I click on View Coupon Details button on a random coupon', () => {
    const randomElement = getRandomIndex(couponsCount);
    assert.ok(coupons.value[randomElement].element('.print-coupon').click('a'));
});

coupons represents an array of WebElements. My objective is to click on the View Coupon detail button.

https://i.sstatic.net/46LLi.jpg

Sample Page:

Thank you,
Vinod

javascriptseleniumselenium-webdriverwebdriver-iocucumberjs

Answer №1

Consider adding a browser pause in your code

browser.pause(2000);

Chrome delays can sometimes cause this issue, but incorporating a pause has always been effective for me.

For more information, check out:

Answer №2

The first method involves copying 99% of the xpath/css selector from the inspector and using .click for guaranteed functionality. If that doesn't work, there are two alternative solutions available.

If you are running scripts on localhost and have access, you can utilize the following code:

.execute(function(a, b, c, d) {
$('#button').click();
return a + b + c + d;
}, 1, 2, 3, 4).then(function(ret) {
// node.js context - client and console are available
log(ret.value); // outputs: 10
});

Alternatively, you can use this method where the mouse is pressed and released. By right-clicking with webdriver.io, you can determine the exact coordinates to input.

.moveToObject('#button', 0, -103)
.buttonDown()
.moveToObject('#button', 0, -104)
.buttonUp()

Answer №3

Exploring different techniques for this task, my approach involves using getLocation() to scroll to the button's position in the viewport before clicking it.

this.Then('I click on View Coupon Details button on a random coupon', () => {
    const randomElement = getRandomIndex(couponsCount);
    const pos = coupons.value[randomElement].getLocation();
    browser.scroll(pos.x, pos.y);
    browser.pause(200); // Alternatively, we can use waitForVisible .print-coupon
    assert.ok(coupons.value[randomElement].element('.print-coupon').click('a'));
});

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

An issue encountered with res.download() following res.render() in Node.js

Just started working with Node JS and ran into an issue: Error: Can't set headers after they are sent. I've checked my code, and the problem seems to be related to res.download(); Is there a way to display the view without using res.render()? ...

javascriptnode.jsexpressejs

Is there a way to automatically remove files from the "dist" directory when deleting the prototype from the "src" folder?

I am new to build systems and seeking assistance with the following question. Here is the structure of my boilerplate: /src (working folder) ___/templates(jade files) ___/scss ___/scripts /dist (compiled files) ___/css ___/js ___.html files In the te ...

javascriptnode.jsnpmgulp

Issue with PHP functionality not functioning properly

I've been working on implementing an AJAX Form to allow users to upload their profile picture on my website. However, I've encountered some difficulties with the process. I have created a PHP page where the form is supposed to be posted using AJA ...

javascriptphpjqueryajaxforms

"Utilizing ng-select with ng-model: A Step-by-Step Guide

Currently, I am working on a code that involves using ng-repeat to loop through options. My goal is to utilize ng-select to choose a value based on a specific condition. However, according to the AngularJS documentation: ngSelected does not interact wit ...

javascriptangularjs

What is the best way to paginate a dynamically updated data table using AJAX in Laravel?

I'm currently facing an issue with rendering a Blade template in Laravel. The template includes an HTML table populated with data fetched via AJAX, and I need to implement manual pagination using Laravel's LengthAwarePaginator. The main Blade fi ...

javascriptphpajaxlaravel

Issue with Ajax post redirection back to original page

I'm facing an issue with my ajax call where I send multiple checkbox values to a php file for processing and updating the database. The post request and database updates are successful, but the page doesn't return to the calling php file automati ...

javascriptphpjqueryajaxcheckbox

Is it possible to alter the appearance of my menu when clicked on?

Is there a way to update the appearance of an active menu or submenu that is selected by the user? I would like the chosen submenu and its parent menu to have a distinct style once clicked (similar to a hover effect, but permanent). /*jQuery time*/ $(do ...

javascriptphpjqueryhtmlcss

Unable to retrieve file from server

Apologies for the basic question, but I'm feeling a bit lost at the moment. I've been diving into learning JavaScript and decided to set up a page on the 00webhost site to experiment and run tests. Everything was going well until I hit a roadblo ...

javascriptajax

Implementing a dynamic function with jQuery Tokenize's change event

I'm currently facing an issue with triggering the on change event on the select box from jQuery Tokenize. Below is the code snippet I am working with: <select id="tokenize" multiple="multiple" class="tokenize-sample"> <option value="1"&g ...

javascriptjquery

JavaScript: Code for creating an overlay component

As someone who is new to javascript and Jquery, I have very little understanding of what I am doing. I have been relying on trial and error to make progress so far. While I am aware that users have the ability to disable javascript, I prefer not to use PHP ...

javascriptjquery

Techniques for retrieving elements from HTML using jQuery

I'm developing a feature that allows users to add videos to playlists by clicking on a link in a popover. The challenge I'm facing is extracting the video_id and the selected playlist when the user interacts with the popover. Any tips on how to a ...

javascriptjqueryhtmlcssajax

What steps can I take to stop the browser from refreshing a POST route in Express?

Currently, I am using node along with stripe integration for managing payments. My application includes a /charge route that collects various parameters from the front end and generates a receipt. I am faced with a challenge on how to redirect from a POST ...

javascriptnode.jsexpressstripe-payments

Using Node.js and Express to retrieve data from a MySQL database and update a table

My .ejs file contains a form that sends data to a MySQL database and then displays two tables with the retrieved data on the same page. However, I am facing an issue where the tables do not refresh after submitting the form, requiring me to restart the ser ...

javascriptmysqlnode.jsexpress

Exploring nested JSON information through jQuery's AJAX call

I am encountering an issue with accessing JSON data using a jQuery AJAX request in JavaScript. I keep receiving a 'Cannot read property [0] of undefined' error in the console of Google Chrome. Despite trying different approaches, such as referrin ...

javascriptjqueryajaxopenlayersarcgis-js-api

Having trouble locating an element by value in Selenium WebDriver using Python?

I need to choose one of the three checkboxes on a webpage, but their source code is as follows: <input type="radio" name="Option" value="1"> <input type="radio" name="Option" value="2"> <input type="radio" name="Option" value="3"> Since ...

pythonseleniumselenium-webdriver

What makes .html effective while innerHTML or appendChild do not have the same impact?

Currently, I am facing a challenge where I am attempting to incorporate an ajax response into a div that contains HTML code involving tables, forms, and more. After testing in Firefox, the innerHTML method worked flawlessly. However, Internet Explorer pre ...

javascriptjqueryajaxinternet-explorer

Checking variable length time with JavaScript Regular Expression

My specific requirement is to validate a string ranging from 1 to 4 characters in length (where H stands for hour and M represents minutes): If the string has 1 character, it should be in the format of H (a digit between 0-9). A 2-character string should ...

javascriptregex

Replace the function if it is specified in the object, otherwise use the default functionality

Having a calendar widget written in TypeScript, I am able to bind a listener to a separate function. However, I desire this separate function to have default functionality until someone overrides it in the config object passed to the constructor. Within th ...

javascripttypescript

Is there a way to update the background dynamically?

I'm currently developing a weather application and I want the background to change dynamically based on the data retrieved from an API. Initially, I set up a variable and utilized an if statement for this purpose. However, I encountered difficulty in ...

javascriptreactjs

Unable to manipulate JQuery lightSlider slides using element index

I've been working on a new page design at this link: The code is still a work in progress, so bear with me as I test out some functions and scripts. At the end of the first section, there are 4 logos that, when clicked, will trigger a modal to pop u ...

javascripthtmljquerycssslider