Interacting with Watir and Cucumber, unfortunately the link is not functional

Being new to the world of Watir and Cucumber, I am currently in the process of running an automation script to create Live IDs. The link that I want to click on the webpage is labeled "New" and it should take me to a form where I can add a new contact for my Live account.

<ul class="c_cc" role="presentation" styple="overflow:visible;">
    <li class="c_sm c_mcp" id = "new">
        <a id href="#" class="c_nobdr t_prs">
            <span class="is_c" dir="ltr" style="padding-right: 5px;">
                <img class="is_img" src="https://p.pfx.ms/is/invis.gif" onload="this.onload=null;$Do.when('$IS.Init',0,this);" style="width:26px;height:26px;background-position:-1px -1px;background-image:url('https://p.pfx.ms/h/command4.png');" alt="New contact" title />
            </span>
            "New"
        </a>
        <span class="c_ms"></span>
    </li>
</ul>

Below is the watir code snippet that I wrote to click on the "New" link:

@browser.div(:id, "c_header").div(:id, "c_cb0").ul(:class, "c_cc").span(:text, "is_c").when_present.click

However, executing this code resulted in the following error:

Watir::Wait::TimeoutError: timed out after 30 seconds, waiting for {:id=>"is_c", :tag_name=>"span"} to become present

Subsequently, I modified the code as follows:

@browser.div(:id, "c_header").div(:id, "c_cb0").ul(:class, "c_cc").span(:text, "New").when_present.click

Unfortunately, this revised code did not successfully click on the "New" link, preventing the appearance of the next form and consequently halting the progress of the remaining code execution. Can anyone provide insight or a solution to resolve this issue?

I later realized that a new window was popping up, which caused the element to be unidentifiable in the previous window. Appreciate the help from everyone who contributed their input.

Answer №1

The first example in the watir code snippet shows the use of a :text locator instead of a :class locator for the .span method. Here is an illustration:

browser.ul(:class, "c_cc").span(:text, "is_c").exists?     #=> false
browser.ul(:class, "c_cc").span(:class, "is_c").exists?    #=> true

In the second part of the watir code snippet, a :text locator with the value of "New" is used for the .span method. However, it should be replaced with a .link method. Be cautious of the double quotes and ensure proper escaping when enclosed within another set of double quotes or single quotes. An example is provided below:

browser.ul(:class, "c_cc").span(:text, "New").exists?      #=> false
browser.ul(:class, "c_cc").span(:text, "\"New\"").exists?  #=> false
browser.ul(:class, "c_cc").link(:text, "\"New\"").exists?  #=> true
browser.ul(:class, "c_cc").link(:text, '"New"').exists?    #=> true

To resolve this issue, consider using one of the following examples:

browser.link(:text, "\"New\"").when_present.click
browser.link(:text, '"New"').when_present.click
browser.link(:class, "c_nobdr t_prs").when_present.click

Answer №2

Oh my goodness, this is so outdated and I have faced the exact same issue before. Interestingly, this snippet of code works flawlessly in regular Ruby but as soon as it's used in a Cucumber step definition, it just won't cooperate.

The goal here is to locate a link within a table and click on it. However, for some mysterious reason, the click action refuses to work.

link = browser.table(class: 'alert-table').tbody.rows[1].cells.last.link(text: 'View')
# <Watir::Anchor: located: false; {:class=>"alert-table", :tag_name=>"table"} --> {:tag_name=>"tbody"} --> {:index=>1} --> {:index=>-1} --> {:text=>"View", :tag_name=>"a"}>
link.click

Current Environment: Ruby 2.4 watir (6.16.5) regexp_parser (~> 1.2) selenium-webdriver (~> 3.6)

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

Discrepancy in inner div presentation between Internet Explorer and Chrome

In my coding dilemma, the "outerDIV" contains an "innerDIV", with Chrome displaying the "innerDIV" at 491px while IE shows it as 425px (matching outerDIV). This discrepancy causes issues in viewing child elements within "innerDIV": Chrome shows the first t ...

Optimizing JavaScript for efficient handling of large arrays

I'm currently developing an image editing program using JavaScript to expand my knowledge of the language. The images I am working with are typically around 3000 x 4000 pixels in size, resulting in a total of 48,000,000 values to manage when convertin ...

Developing tabbed sections in XSLT

Utilizing Angular JS within XSLT, I am aiming to develop a tab-based user interface using XML data. The requirement is to generate multiple links and corresponding div elements based on the number of nodes in the XML. To manage the display of these div ele ...

Troubleshooting issues with document.querySelectorAll in JavaScript

Can someone explain why document.querySelectorAll isn't functioning properly in this code snippet? I'm a beginner and could use some help. <p id="demo">This is a paragraph.</p> <h1 id="1demo"> Hello </h1&g ...

Click on the link or tab to update the marker location on the Google Map

Can you click on Tab 2 to change the marker/location, and then go back to Tab 1 to switch it back to the original location? [Links to Fiddle] http://jsfiddle.net/ye3x8/ function initialize() { var styles = [{ stylers: [{ saturati ...

Use jQuery to trigger a click event when an element is in focus, unless it was clicked to

I am currently developing a website using the MDL framework. One issue I encountered is that there is no default select form element provided. After some research, I found a solution by utilizing a menu component that displays when the input is clicked. Th ...

Using Javascript to extract formatted text from a webpage and save it to the clipboard

I've developed a straightforward tool for employees to customize their company email signature. The tool generates text with specific styling, including bold fonts and a touch of color - nothing too extravagant. When I manually copy and paste the styl ...

Ways to cap the height of elements at predetermined values ("stepped") depending on the content within

After posting a question on this topic here, I am seeking advice on how to implement "step-based heights" for a div element. To further clarify, my goal is to have each box with a height that is a multiple of 400px. For example, if the height is 345px, it ...

Adjustable div heights for text within inline elements

How can I make two inline-table divs (content and sidebar) have the same height regardless of their content? I've experimented with various attributes, but nothing seems to be working. You can view my website here. ...

A guide on applying color from an API response to the border-color property in an Angular application

When I fetch categoryColor from the API Response, I set border-left: 3px solid {{element.categoryColor}} in inline style. Everything is functioning correctly with no development issues; however, in Visual Studio, the file name appears red as shown in the i ...

Steps to indicate a selected check column in a grid

I am working with a grid that has a check column, and I need to programmatically mark the checkbox. This is how the check column is coded: columns: { items:[ { itemId: 'checkColumn', xtype: 'selectallche ...

Adaptive Website displayed within an iframe

Currently, I have a responsive website that can be viewed here. The main objective is to embed this site into an iframe while maintaining its responsiveness. I attempted embedding my site in JSFiddle for testing purposes, which you can see here. However ...

Tips for making rounded corners with CSS styling

Can someone help me create a border like the one shown in this image? https://i.stack.imgur.com/b0GIa.png .child::before { content: ""; position: absolute; width: 13px; height: 13px; left: -1px; background: transparent; border-bott ...

Is your webpage displaying unnecessary white space on smaller screens?

.main { background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab); background-size: 400% 400%; animation: gradient 15s ease infinite; height: 100vh; min-width: 100%; width: 100%; overflow-x: hidden; overflow: hidden; } Here i ...

"Utilize Bootstrap's responsive 3-column grid layout for a sleek design, complete with hidden col-12 elements below each grid

Looking to create a 100% width column below an element within a column of a bootstrap grid. For better understanding, here is what I'm aiming for: https://i.stack.imgur.com/pl1Fi.png On selecting one of the images (from 1 to x), a hidden div with di ...

Center the image and align the floated texts on each side horizontally

I've recently started learning about HTML and CSS, but I'm having trouble grasping one concept. My goal is to align two floating <p> elements on either side of a centered <img>. Here's an example of what I'm trying to achiev ...

Error encountered during post-installation process for package `[email protected]`. The script `node scripts/build.js` failed to execute, resulting in an exit status of 1

Whenever I run the gulp serve command for my AngularJS Fuse project, I encounter this error. C:\wamp\www\bank_admin_post_login\Fuse-1.4.1-demo>gulp serve C:\wamp\www\bank_admin_post_login\Fuse-1.4.1-demo>npm rebuil ...

Apply border-radius to the group of columns in CSS

I'm having trouble applying border-radius to the column group in an HTML table. Is there a solution for this issue that allows me to maintain accessibility for the table view? Is there a way to achieve border-radius on the column group while ensuring ...

The last value label in Google Charts bar chart getting cut off

I've searched extensively for a solution to this issue regarding the haxis labels, but I have not been able to find one that addresses it... In the image provided below, you'll observe that the last percentage label on the horizontal axis is mis ...

A single column in Bootstrap displaying text vertically

Looking to rotate the "VERTICAL_TEXT" (third bootstrap column) by 90 degrees, I attempted the code below: <div class="row"> <div class="col-xs-2" style="background-color: yellow;"> <span>FOO1</span><br/> & ...