How do I choose and click on a JavaScript link using Watir-Webdriver?

For my mobile webapp, I am attempting to create a test using cucumber+watir-webdriver. However, I am encountering difficulty when trying to select a specific link on a splash message.

The link I need to choose is

<a class="btn" href="#">Close button</a>
, which is dynamically generated on the page through javascript.

I have attempted to use various selectors:

browser.link :text => 'Close button'
browser.link(:class,"btn")
browser.div(:id,"vf_dialog_desc").link(:class,"btn") # with surrounding div
browser.div(:xpath,"//div[@id='vf_dialog_desc']/descendant::a[text()='Close button']")

Unfortunately, all of these attempts have failed, resulting in an error message similar to:

Error: {"message":"Unable to locate an element with the xpath expression (...snip xpath expression...) because of the following error:\nTypeError: Object #<an HTMLDocument> has no method 'evaluate'"}

Coincidentally,

browser.html.include?  'Close button'
returns true, indicating that watir can indeed access the element.

It is important to note that this particular page is not contained within a frame.

The structure of the page is as follows:

<html>
    <head>...</head>
    <body>
        <div id="home">
        <div id="vf_dialog_holder" class=" show">
            (...)
            <div id="vf_dialog_wrap">
                <h4 id="vf_dialog_head" style="display: block;" class=" vf_dialog_info_icon">Welcome to xpto</h4>
                <div id="vf_dialog_desc">
                    <img src="884857.jpg">
                    <p>Blurb.</p>
                    <a class="btn" href="#">Close button</a>
                </div>
                <div class="clr">
            </div>
         </div>

I am currently using watir-webdriver (0.6.4) on ruby-2.0.0-p247.

Answer №1

It seems like the button is being generated using javascript, which could be causing Watir to try interacting with it before it is visible on the page. To resolve this issue, consider explicitly waiting for the element to appear.

If you simply need to wait for the link to show up:

browser.link(:class => "btn").wait_until_present

If you want to perform an action (such as clicking) on the button once it becomes visible:

browser.link(:class => "btn").when_present.click

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

Can Selenium successfully scrape data from this website?

I am currently attempting to extract Hate Symbol data (including the name, symbol type, description, ideology, location, and images) from the GPAHE website using Selenium. As one of my initial steps, I am trying to set the input_element to the XPATH of the ...

Excluding the decimal point from version 1.0 in an API response with Angular 5

When working with Angular 5, I encountered an issue where the API response was returned as 1.0, but when displayed in the HTML field it only showed as 1. Upon inspecting the response in Chrome dev-tools, under the Network tab -> Response, it correctly ...

Tips for utilizing sorting, searching, and pagination features in Bootstrap 5 tables

In my simple table, https://i.sstatic.net/bu1md.png Furthermore, I have integrated Bootstrap 5: <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="15777a ...

Trigger a function following a collection update in Angular Meteor

I am in the process of developing a multiplayer game, and I would like a specific function to be triggered once the first player updates an "isStarted" field in the collection. Within my controller code: angular.module('mcitygame').directive(&a ...

Error: Unexpected token : encountered in jQuery ajax call

When creating a web page that requests remote data (json), using jQuery.ajax works well within the same domain. However, if the request is made from a different domain (e.g. localhost), browsers block it and display: No 'Access-Control-Allow-Or ...

Navigate the JSON object at predetermined intervals, such as in the case of movie subtitles

Apologies if the title is not specific enough, open to any suggestions for improvement. Here's my issue: I have a JSON file (presented here as a JavaScript object) that contains subtitles for a movie. My goal is to display the text exactly as it appea ...

Transferring data from WordPress to an Android app via JSON requests

Looking for some guidance here. I'm using an application that sends HTTP POST requests. I have a Wordpress website and I want to set up a list of prohibited license plates that we'll refer to as denied plates. This is what the app developer prov ...

Creating a callback API in Parse to retrieve a JSON response from an external API: A step-by-step guide

Greetings to all Stackoverflow developers. I am embarking on the journey of working with Parse and integrating third party services via PHP API. I have successfully been able to post data and retrieve responses from these APIs, but now the third party req ...

Discover a specific segment of the pie chart

Currently, I have a pie chart that has been created using HTML5 canvas. I am able to retrieve the coordinates (X,Y) when the mouse hovers over it. Now, my goal is to determine which slice of the pie chart the Point (X,Y) falls into. Please note: I have ...

Mobile-responsive iFrame content is designed to adjust and fit appropriately on

While my iframe is responsive on both mobile and website, I am facing an issue where the content overflows (both overflow X and Y) from the width and height of the iFrame. Here's the scenario: in the mobile view (simulated using Google Chrome to mimi ...

Prevent closure of Bootstrap offcanvas on backdrop click in a Blazor .NET application

Trying to implement an offcanvas window form and ensuring it stays open only when the user clicks the close button. Following client requirements, I need to call the offcanvas window via C# with IJSRuntime injection instead of directly from HTML. Operatin ...

What is the best way to set a date input as required with AngularJS?

Angular 1.2.23 is the version I am currently using, and I want to set an input field with type=date as required. Here is the code snippet I have: <form name="form" novalidate> <input id="date" name="date" type="date" required /> <sp ...

Creating dynamically generated nested text inputs with individual v-model bindings upon the clicking of a button

As a newcomer to vuejs, I am attempting to create nested textboxes dynamically with the click of a button. For a clearer explanation, please refer to this jsfiddle link: https://jsfiddle.net/avi_02/qLqvbjvx/ Let's use an analogy to grasp the iss ...

Issues have been reported with event listeners (specifically onkeypress and onkeydown) not functioning properly on Android's numeric keyboard

After countless hours of troubleshooting, I am convinced that something is awry. My issue revolves around a simple input field: <input type="number"> I intend for it to exclusively accept numbers (0-9) and nothing else. To accomplish this, I i ...

JQuery Mobile's Panel widget is the culprit behind the demise of the

I'm having some trouble adding a panel to my jQuery mobile page. Every time I try to input the code, all I see is a white screen with the loading widget, and nothing else happens. I have JQuery 2.0.0 hosted by Google, JQuery Mobile JS 1.3.1 hosted by ...

Utilize Vue to call a method by providing its name as a string

When designing a navbar, I encountered the need to include a list of buttons. Some of these buttons should act as links, while others should call specific methods. For example, clicking on "Home" should direct the user to /home and clicking on "Log out" sh ...

Create a data attribute object and assign to it the prop object received from the parent component

I am struggling with passing an object as a prop from a parent component and then utilizing it to initialize the child component with the received value. The main objective behind this is to create a dialog box that includes a child form component with mu ...

How to use jQuery to iterate over changing elements and retrieve their data values

Exploring the potential of a collapsible panel to meet my requirements $(".sport").on("click", function() { var thisId = $(this).attr("id"); var thisChildren = $(this) + ".sportlist"; $(thisChildren).each(function(index) { }); }); <link ...

What could be the reason behind the malfunction of my jQuery .css method?

I am currently working on a taglist that allows users to add and remove tags, connected with mySQL. I have successfully retrieved the tags from the database using an ajax call, but I am unable to perform any operations on them, not even apply a basic style ...

Switch out external CSS stylesheets automatically using toggle scripting

Hello there! I've been trying to figure out a way for this script to switch back to the original CSS external stylesheet. Here is the code that I currently have: $(document).ready(function() { $("#css-master2").click(function() { $("link[title=chang ...