How to select text based on its color property using Watir in Ruby

I'm having trouble clicking on a specific element within a table. There are multiple elements with the same class <span class="price">, but I need to click on one that has a color property of color:#555. I attempted a few different methods without success:

1- browser.span(:class => 'price', visible: true ).click  -- did not work  
2- browser.span(:class => 'price', ).style(color: '#555').click  -- undefined method click for string

Because the link's availability can vary, sometimes appearing gray and unclickable, is there an alternative approach to achieving this click?

cssrubywatir

Answer №1

If you want to achieve this, try using the following method:

browser.span(:css, 'span[style="color: #555;"].price').click

To access the color values, utilize the css selector since the style method is only capable of retrieving values from the style attribute. See below for an illustration:

browser.spans(:class, 'price').each {|e| puts e.style('color')}

Additionally, I recommend enhancing the CSS to make product availability more clearly stated if possible.

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

What's causing my React app's slideshow to malfunction?

Struggling with styling my React app after importing w3.css and attempting to create a slideshow with 3 images in the same directory as the component being rendered. As someone new to React and web development, I'm facing challenges in getting the des ...

javascriptcssreactjsw3-css

arranging texts in a vertical stack with wrapping

Looking to change the orientation of my horizontally wrapped list items from vertical to horizontal. Take a look at my code snippet: HTML <ul> <li>Long text goes here.</li> <li>Another Longer Text Goes Here</li> < ...

htmlcsswhitespaceword-wrap

What is the best way to center align a card using Bootstrap 4?

<div class="container"> <div class="row align-items-center h-100"> <div class="col-6 mx-auto"> <div class="card bg-white mx-auto" id="maincard"> <div class="card-body"> ...

htmlcssbootstrap-4

What is the best way to add a CSS link if a request is not made using AJAX?

My webpage, 'foo.html', retrieves data from a database using AJAX ('ajax.html?options=option1') to populate a table. The table is styled nicely with CSS that is linked to 'foo.html'. However, I also want the ajax.html page to ...

htmlcssajax

Conceal the elements of Widget Style by using jQuery to target the ul

My task involves creating a widget style using HTML's ul tag. <div class='tabs' style='width:50%'> <ul> <li id="basic-li"><a href='#basic_information'>Basic</a></li> <li id="mas ...

javascriptjqueryhtmlcsswidget

The CSS counter fails to increment

In this unique example: h3 { font-size: .9em; counter-reset: section; } h4 { font-size: .7em; counter-reset: subsection; } h3:before { counter-increment: section; content: counter(section)" "; } h4:before { counter-increment: subsection 2; ...

csscss-counter

What is the best approach to increase the height of a div element dynamically

I've encountered an issue with a div tag containing an image that may exceed the screen size. When this happens, I want to increase the height of the div tag and have a footer displayed below it. Currently, my styling for the div tag looks like this: ...

htmlcss

The affix feature in Bootstrap's navbar fails to recognize the height of images

My navbar element affixes prematurely when placed below my header element, making it seem as if the image in the header does not exist. The navbar is meant to affix only when it reaches the top, but currently, it is affixing earlier. The code I used sets ...

javascriptcsstwitter-bootstrapaffix

Turn off automatic compilation for LESS styling

In my Eclipse environment, I am looking to have LESS compile only when explicitly triggered by mvn package. Currently, any changes made in my less file immediately update the CSS. How can I prevent this automatic behavior? <plugin> <groupId> ...

csseclipsemavenless

What is the best way to trigger an onclick event for an input element with a type of "image"?

In the code I'm working on, there's an input of type "Image". <div class="icon" id="button_dictionary"> <form> <input class="buttonDictionary" type="image" src="icone_dicionario.jpg" value="" id="inputDictionary"> ...

javascripthtmlcssimagehtml-input

How can I keep tab-navigation fixed in Bootstrap 4?

Issue with bootstrap 4 tab navigation: Clicking on a tab jumps to the correct tab pane but doesn't stay in place. Additionally, if the pane is longer than the viewport, it jumps to the top of the page after loading, covering the nav-tabs. I've fo ...

cssbootstrap-4

Steps to turn off Bootstrap's fixed navigation on mobile devices

When a user visits the mobile version of the website or scales the webpage, the Bootstrap navbar will no longer remain fixed at the top. I am looking to set it as a normally scrolling view in the navbar. The Bootstrap class is "navbar-fixed-top" https:// ...

htmlcsstwitter-bootstrap

Feeling lost when it comes to forms and hitting that submit button?

Below is a sample form structure: <html> <head> <title>My Page</title> </head> <body> <form name="myform" action="http://www.abcdefg.com/my.cgi" method="POST"> <div align="center"> <br><br; <br& ...

javascripthtmlcss

Incorporating an external JavaScript or CSS file into a Java web application at runtime

I am looking to dynamically add an external JavaScript or CSS file in my test.html file. Although I am aware of a trick that involves using jQuery like this: $(”).appendTo(‘head’).attr({ rel: ‘stylesheet’, type: ‘text/css’, href: ‘**ht ...

javajavascriptjquerycss

What is the best way to give an element or container a variable width rather than a fixed width?

I have a query regarding positioning and variable width. I've applied the following CSS: *{ border: 1px dotted blue; /*indicator for where every element are positioned or spaced on the page*/ } By adding this to all elements, I can visualize their p ...

csshtmlwidthcss-position

How to position an element to the left and another to the center of the screen while vertically aligning both using CSS

I have a single list and an h1 header. My goal is to position the list on the left side of the screen and center the h1 vertically in relation to the list. The size of the list is variable, so I want the height and width to adjust accordingly without overl ...

htmlcss

creating page breaks in Microsoft Word using HTML

I am currently creating documents using PHP in both Word and PDF formats. For generating a document in Word, I am utilizing headers like this: header("Content-type: application/vnd.ms-word"); header("Content-Disposition: attachment;Filename=example.doc") ...

phphtmlcssms-word

How can I integrate the "Pure CSS Sphere" feature into my website?

http://codepen.io/waynespiegel/pen/jEGGbj I stumbled upon this fantastic feature that I would love to incorporate into my website (purely for personal practice) and am intrigued by how it can be integrated. As a newbie in this type of programming, I' ...

htmlcsswebsasshaml

What causes the contents of a container div to be shifted below the div itself?

I am attempting to create a circular border around an emoji, contained within a span inside a div. The 50% radius border should appear on hover, which it does, but the content in the span gets pushed below the div. Refer to the screenshot provided. <di ...

css

Accordion for controlling the start and stop of the content slider

I have a code snippet below for a Pure CSS content slider in an accordion that I've built. I'm wondering if it's feasible to control the start and stop of the Content Slider when the accordion opens and closes. Currently, the Content Slider ...

javascripthtmlcss