Retrieve a class attribute that is only visible when a checkbox is checked in Ruby using Selenium

One of my tags has the following structure:

<ul id="genres-bar" >

After a user selects the "Romance" check box, the background changes and the tag becomes:

<ul id="genres-bar" class=" romance">

I'm trying to figure out how to access and verify this attribute. Essentially, I want to confirm that the color change has taken place.

Upon inspecting the code, I noticed this specific CSS snippet being applied when the check box is clicked:

#movies.gen-romance .m-gen-R {
    background-color: #FF0000;
}

The snippet disappears when the check box is unchecked.

Since I am new to HTML, CSS, XPaths, etc., I'm finding it challenging to locate similar questions or answers online. However, I did come across a solution in Java that seems relevant but I am struggling to adapt it to my issue:

access css class properties in selenium

Here is what I have tried so far in terms of locating the element:

verify {@driver.find_element(:xpath, '//*[@id="genres-bar" @class=" romance"]')}

Answer №1

If you're unsure about your requirements, the following tips could be beneficial:

Take a look at css_value(prop) and attribute(name). These methods could provide assistance based on your specific situation.

@driver.find_element(:css, '#genres-bar').css_value('background-color')
# => '#FF0000'
@driver.find_element(:css, '#genres-bar').attribute('class')
# => " romance"

Answer №2

Have you considered trying a variation of this approach?

validate {@driver.find_element(:xpath, '//*[@id="genres-bar"][@class="romance"]')}

Alternatively, you could try:

validate {@driver.find_element(:xpath, '//*[@id="genres-bar" and @class="romance"]')}

You were very close to getting the xpath correct.

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

Tips for applying CSS to background images

Just working with one div here <div id="particles-js" > and in my CSS, I've got this: #particles-js{ width: 100%; height: 100%; background-color: #b61924; background-image: url("../js/image.jpg"); background-size: cover; backg ...

The html input box's ability to handle overflow situations

Currently, I am working on creating a form that allows users to update data. <dl> <dt>Medical Needs:</dt> <dd class="med_needs" style="height:60px;overflow:auto"> <input type = "text" id="med_needs"name ="med_nee ...

Incorporating HTML PDF viewer into Kentico 9

Looking to incorporate an HTML code from Calaméo (PDF reader) into Kentico 9, I encountered an issue where the PDF reader does not show up on the website after pasting the code. Upon further investigation, I noticed that the code is altered when the pag ...

Steps to execute a second Python file and run it in the same browser that was initially opened in the first file

//MainFile.Py import time from selenium import webdriver from selenium.webdriver.chrome.service import Service from selenium.webdriver.common.by import By driver.maximize_window() driver.get("https://onesy ...

The issue of CSS not functioning properly across various page sizes

I have created my toolbar: <header className='toolbar'> <nav className='toolbar_navigation'> ///hamburger: <SideDrawer drawerClicked = {props.drawerClicked} /> ///LOGO ...

Creating an If statement tailored for a particular image source: a step-by-step guide

In the program I am running in Dreamweaver, there is a specific line of code that looks like this: function go() { if((document.test.test1.src == document.test.test2.src && document.test.test2.src == document.test.test3.src )) ...... ...... ..... ...

Is it necessary to install only form control styles from Bootstrap 4?

Does Bootstrap 4 offer a way to only install the form control styles like input group? I came across a resource that allows you to solely install the Bootstrap 4 Grid. Is there anything similar for downloading just the form styles? ...

Achieving full width for the elements in a row with Flexbox: A step-by-step guide

I am dealing with a flexbox grid that contains random width images: https://i.stack.imgur.com/pfPeU.jpg I want to stretch the elements in each row to full width to eliminate any white space - Is there a way to achieve this using CSS? justify-content do ...

Python Selenium Webdriver struggling to locate element even with seemingly accurate xpath

My attempt at automating tasks with Selenium has hit a roadblock as I am struggling to locate a specific element. Despite successfully locating numerous other elements on different pages using the same method, this particular element seems to be elusive. I ...

Failing to capture an error

I'm attempting to capture the Webdriver exception without cluttering up my logs with unnecessary traceback information. Below is the snippet of code I am working with: from selenium.common.exceptions import TimeoutException, WebDriverException try: ...

Bootstrap not functioning properly in selecting gallery items

Looking for some help with my website's gallery page development. I've included the HTML and JavaScript files below. However, I seem to be missing a selector ID as none of the pictures are changing and the categories aren't working. Any help ...

When encountering a 404 redirect, CSS and JS files may fail to display

I created a unique error message using .htaccess, incorporating CSS and JS in separate folders. Although it functions properly when accessed directly, integrating these resources into the 404 Error message results in only the HTML text being displayed with ...

The issue with height percentages being ineffective in CSS

My goal is to utilize the height property with percentages, however it seems to be ineffective. I desire to use percentages so that the layout appears well in various resolutions. <div id="bloque_1" style="height: 80%;background: red"> </div> ...

Navigating to a File Upload dialog box - Automating with Python and Selenium

I am facing an issue with uploading a file for testing purposes. Despite trying various solutions found on this site, none seem to work for me. Below is the window I am currently dealing with: https://i.sstatic.net/FAQUr.png Instead of clicking on the f ...

Encountering a persistent GET error in the console while working on a project involving a cocktail API

Programming: const API_URL = "www.mycocktaildb.com/api/json/v1/1/search.php?s="; const $cocktailName = $('#cocktailName'); const $instructions = $('instructions'); const $form = $('form'); const $input = $(`inpu ...

Tips for refreshing a frozen web page using Selenium with Java WebDriver

When running test cases with Selenium in Java/Firefox, I have encountered an issue where the QA server hangs. Upon clicking the login button, the page does not progress to the next page and the loading spinner continues spinning indefinitely. Currently, my ...

Using Angular 4 for HTML 5 Drag and Drop functionality

I have been working on integrating native HTML 5 drag & drop functionality into my angular application. While I have successfully implemented the drag and dragOver events, I am facing an issue with the drop event not firing as expected. Here is the snipp ...

Ways to display the chosen value based on the item's index using Javascript in Angular

If you want to view the complete code, just click on this link. I have identified the main issue here. Check out the code here: https://stackblitz.com/edit/test-trainin-2?file=src/app/app.component.html The problem is when you interact with the green bal ...

Refreshed page causing hide/show div to reset

Hello there, I'm currently working on a web application and I need to implement some JavaScript code. The application consists of three sections, each with its own title and button. When the button is clicked, a hidden div tag is displayed. Clicking t ...

How can JavaScript be used to toggle the visibility of text on a webpage

Can anyone help me with a problem I'm having toggling text? I have a truncated text and I want to be able to switch back and forth between the truncated text and the original text on button click. Here is a link to the pen. var myButton = documen ...