Watir: selecting the first table cell that contains an a-href link

My CSS alias looks like this:

module MyPage

  def locator(key, *options)
    hash = {
        "FIRST_TABLE_CELL_HREF" => [ :css => '#my-table td:nth-child(1):first a']
    }
  end

I am trying to click on the alias using Ruby syntax:

@page.find("FIRST_TABLE_CELL_HREF").when_present.right_click

The issue I am facing is that it's a Javascript style alias and not working as expected.

So my question is, how can I convert this to a Ruby style css alias?

Note:

$('#my-table td:nth-child(1):first a')
executes successfully in browser console.

This is particularly important for @TitusFortner: When targeting a specific element, his approach holds true. However, considering my use of a business level language (Gherkin), I need to create a universal instruction. An example would be:

When I right click on the element "FIRST_TABLE_CELL_HREF"
. This instruction should correspond to:

When(/^I right click(?: on|)(?: the|) "([^\"]*)"$/i) do |scope|
  @page.find(scope).when_present.right_click
end

Where @page = @browser.visit(SomePage), and

@browser = BrowserBase.new start_browser(ENV['BROWSER'])

Answer №1

Watir makes it simple to locate elements without relying heavily on css selectors

To open a new browser instance with Watir: browser = Watir::Browser.new

To access the first link within a table:

browser.table(id: 'my-table').link

To target the link in the first data cell of a table:

browser.table(id: 'my-table').td.link

If css is necessary for selection:

browser.link(css: '#my-table a')

When dealing with tables nested within an iframe, make sure to specify the iframe context as the driver may not automatically detect it. In Watir, this approach works:

browser.iframe(id: 'iframe_id').table(id: 'my-table').link

However, attempting to use css directly without specifying the iframe will not work:

browser.link(css: '#iframe_id #my-table 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

Eliminate the Border from Bootstrap 5 navigation-toggler through standard css styling

I am trying to eliminate the light grey border around the mobile 'hamburger' menu. I am utilizing font-awesome and Bootstrap 5 (imported through CDN) to create it, but I can't figure out how to get rid of the rounded border. html <na ...

Remove alerts from the application interface via API

I'm looking to add the ability to delete notifications by swiping. I've managed to delete a row locally, but I'm stuck on removing it from the server. Here's the relevant API information: desc 'delete notifications' para ...

The CSS tag combination of 'position:relative;' and 'top:xx%;;' functions properly in Chrome, however, it does not work in any non-webkit browsers such as Firefox, Internet Explorer, Opera, etc

Encountering some strange behavior with a simple piece of code that I can't seem to figure out! I am trying to position a footer navigation at the bottom of my page using 'position:relative;' and it works perfectly in Chrome. However, in FF ...

Looking to design a popup using CSS styles

How can I design a pop-up window using CSS for a specific div? I also want to display additional information within another div inside the popup. ...

Assign the two values to variables in the CSS script

My challenge lies in passing two values to the CSS within the <style> tags. The values are: (background-color: --placeholder; color: --placeholdtext;). I am able to pass either one of the values successfully, but not both at the same time. When I cop ...

Make sure the 'card-title' is positioned directly before a div element

How can I align the 'title' to start right above 'first yeah', with the image positioned accordingly? https://i.sstatic.net/fyI2o.png I've attempted various methods (including using classes) but have been unsuccessful so far Her ...

Ensure to preselect the radio button based on the Day's value

I have set up my Radio buttons with corresponding content to be displayed when clicked. I want to automatically pre-select the tab button based on the current day. For example, if today is Sunday, the page should load showing the contents for Sunday. If i ...

The edit button for an element should only modify that specific element, but instead it is making changes to all elements

Currently, I am working on creating an edit function for a favorites bar. The issue I am facing is that when I attempt to edit one box, all the previously clicked boxes are also being edited. You can find the complete code in this jsfiddle link: https://js ...

Move your cursor over the image to see a different image appear

I am facing an issue - I'm attempting to make image hover affect another hover <img id="1" src="#" /> <img id="2" src="#" /> #1 {width:20%; opacity:0.5 } #2 {width:80%; position:absolute; display:none; } I have experi ...

The previous and next buttons are displaying side by side rather than being positioned at the outer edges

I am having an issue where the prev and next buttons are displaying next to each other instead of at the edge of the div. Can someone please assist me in fixing this problem? Below is the provided HTML code: <div id ="moreOption_80322271" class="m ...

The cropper fails to load within the image element inside a modal pop-up

Utilizing fengyuanchen's cropper library, I am cropping an uploaded image and then submitting it to a form. <div id="change-dp" uk-modal> <div class="uk-modal-dialog uk-modal-body"> <button class="uk ...

When attempting to utilize AGGREGATE, it is important to note that FieldPath field names cannot include a period (.)

What seems to be the issue with my query? db.table.aggregate([ { '$match' => { '$expr' => { '$and' => [ { '$eq' => [{ '$size' => '$events' }, 4] }, ...

Exploring the Layout Options of Twitter Bootstrap 3

Can someone help me achieve this specific layout design using Bootstrap 3? --------------------------------------------------------- | | | | | ...

Adjusting the screen width to activate a responsive nav bar with a centered title

I'm facing an issue with the alignment of the heading within a navigation bar, causing the links to wrap before the collapse of the nav-bar occurs - https://i.sstatic.net/bKyPM.png I am trying to make the links collapse earlier than they currently d ...

Angular CLI is not displaying CSS

I am currently using angular cli version 1.4.3, node version 6.11.3, and npm version 5.4.2. My goal is to retrieve records using angular2 and display them on localhost. I expected the output to look like this: https://i.sstatic.net/S8TVI.jpg however, the ...

Challenges encountered when extracting colors from an object/model using ngStyle

I created a unique shape using html/Css and now I want to fetch its color from a data service. [ngStyle]="{'background-color':'#0B0036'}" Everything works perfectly when I use the above code. However, when I try either of the followin ...

Delete the designated column from the table

I am having difficulty with hiding and showing table columns using checkboxes. I need to eliminate the Mars column (in bold) along with its corresponding data (also in bold). Once the Mars column is removed, I want the Venus column and its data values to ...

What causes inline-blocks to malfunction after a non-breaking space is inserted?

Here is some HTML code: <p id='one'>Hello World how are you.&nbsp;<span>Entrepreneur</span></p> <p>Hello World how are you.&nbsp;<span>Entrepreneur</span></p> Below is some CSS styling: ...

There seems to be an issue with vertically centering row divs in Bootstrap

Struggling to center a row div vertically in an ASP.NET MVC project? Despite numerous attempts, the content remains at the top. Here's a quick fix with some eye-catching colors to illustrate the issue: Site.css: html, body { height: 100%; } #mm ...

jQuery UI DatePicker: without any styling, no picking dates

I'm struggling to configure a jQuery UI DatePicker. I moved the development-bundle folder contents to the directory res/jqueryui and initialized two datepickers as shown below: <script src="res/jquery-2.1.0.min.js"></script> <script sr ...