What is the correct way to locate a CSS selector based on its text as opposed to using xpath?

When attempting to create a basic HTML layout, I encountered some challenges.

<html>
  <head>
    <title>Simple Site</title>
  </head>
  <body>
    <form>
      <label>Name:</label><input type="text"></form><br/>
      <label>Phone:</label><input type="text">
    </form>
    <div>happy</div>
    <div>angry</div> 
    <div>sad</div>
  </body>
</html>

I made several attempts to target a specific div element based on its text content but all failed.

 div[@text='happy']              #nope
 html body div[@text='angry']    #nope
 html body div:contains('angry') #nope
 html body div[text='angry']     #nope

What am I overlooking?

Answer №1

While CSS lacks the capability to target elements based on text content, Capybaras find feature includes a text option for filtering by text content, accepting either a string or a regular expression.

angry_div = find(:css, 'div', text: 'angry') # The :css can be skipped if Capybara.default_selector = :css (which is the default)

Answer №2

Check out the code snippet provided below:

 div[type='joy']{
   background-color:blue;
 }   
<form>
    <label>Name:</label><input type="text"></form><br/>
<label>Phone:</label><input type="text">
</form>
<div type="joy">joy</div>
<div>sorrowful</div>
<div>excited</div>

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 are the steps to clipping a canvas using CSS clip-path?

When it comes to clipping a canvas, there are multiple methods that can be used. One way is to create a path with getContext('2d') and set globalCompositeOperation. Another method involves using -webkit-clip-path or clip-path, though the latter m ...

The CSS background and background-image are visible exclusively on the Chrome desktop browser

Why is the background image not showing up on my website? The img src is also not displaying. All pictures show up fine on Chrome desktop browser, but not on Chrome mobile browser. Other browsers that are not displaying the images include Safari mobile, I ...

Incorporate alternate text to enhance hover effects on the page

Looking to add a hover effect to images without being able to use the title attribute in the img tag? Consider using the alt text attribute for the title on hover. <img width="300" height="169" src="300x169.jpg" class="attachment-medium" alt="sometexth ...

What is the best way to use a CSS class in my script specifically for specific screen sizes?

Utilizing bootstrap 4, my code is executing a for loop to generate eight divs with the class "item". To display five items per row, I am using the class "col-2". However, this results in six items being shown in a single row. Since I cannot include the o ...

Why is the size not showing when I use driver.find_elements_by_class_name('radio')?

Whenever I attempt to scrape this particular link https://hbx.com/brands/reebok/club-c-85-1 When I make the following calls: driver.find_elements_by_class_name('radio') or driver.find_elements_by_class_name('hidden-xs') or driver.fi ...

What is the best way to eliminate the gap between these two div elements?

There's a gap between two divs in my HTML that I can't seem to remove. Here are the relevant CSS styles: #tab-2-content { display: grid; grid-template-rows: 1fr 2fr; width: 70%; margin: 0 auto; grid-gap: 0; } ... (CSS code continues) ...

Remove the icon disc background from a select element using jQuery Mobile

As I delve into building my first jQuery Mobile app using PhoneGap/Cordova, I have encountered some challenges along the way in getting the styling just right, but overall, things are going well. However, when it comes to working with forms, I hit a roadb ...

What is the best way to locate and interact with nested HTML elements using Selenium?

I am using a website for school class schedules and I am trying to locate the div element that contains information about the number of seats in a class and who is teaching it so I can scrape it. First, I identify the element that encloses the desired div ...

What is the best way to make a drop down menu list appear when I click on the parent li, and then show the sub li using JavaScript?

I have a code that includes an image, HTML, and CSS code. Can anyone please tell me how I can set up a drop-down menu list to open the sub <li> elements when I click on a parent <li> using JavaScript? You can see the appearance of the code in t ...

How can I achieve a stylish alternating bottom-border effect for my website navigation menu?

Is there a way for me to achieve this navigation style? https://i.sstatic.net/LSNHL.png Here is the code I am working with currently. https://gist.github.com/anonymous/9c239f1b541aa26d461b I'm facing difficulty replicating the line style. Any sugges ...

Choose a date in the upcoming days using the Selenium date picker function

I'm grappling with the task of choosing a future date using a date picker, but I'm struggling to figure out the approach. The challenge is that I need to select a date that is 14 days ahead, yet the date picker only displays one calendar month a ...

Arranging items in a semi-circular formation around the color Blue in a precise manner

I have a character named Blue (who is blue) and I would like to place some elements in a half-circle around him. Each element will consist of an image and a text span positioned below the image. My current attempt results in the elements rotating incorre ...

Positioning a file drop area discreetly hidden behind a cluttered data-packed table

I have been experimenting with the ngx-file-drop module for Angular 4. Lately, I have been working on adding a file drop feature to a website that displays data in a table using *ngFor and *ngIf directives. My goal was to create a background drop zone beh ...

Guide on utilizing the carousel component in Bootstrap and populating it with data generated from Node.js

My goal is to design a carousel that displays 5 different pieces of information pulled from a separate app.js file. I attempted to implement a forEach loop, but encountered issues when trying to create a second Bootstrap carousel container. Here's th ...

Create a Boostrap navbar with a form and links aligned to the right using the navbar

I'm trying to use navbar-right on a navbar-form and a navbar-nav, but the form ends up on one row and the nav links on another row on the right. How can I make the navbar display the brand on the left and have a search field followed by nav links on t ...

How can I trigger the second animation for an object that is constantly moving within a specific range in the first animation?

I am looking to create a simulation of rising and falling sea levels. Currently, when I click the button, the level rises from its starting point to the top, but I am unsure how to achieve this effect in my code. Below is the code I have written so far, an ...

Having trouble launching Internet Explorer using Selenium WebDriver in Python

Currently, I am utilizing Selenium to automate a webpage test using IE11. Even after diligently following all the steps provided in the instructions on https://github.com/SeleniumHQ/selenium/wiki/InternetExplorerDriver#required-configuration, I still encou ...

What is the best way to align li elements in a ul list at the

How can I center ul elements on a web page? I have checked similar questions on this site and tried using text-align in my CSS file to center the elements, but it didn't work as expected. I also attempted to use margins which did center the elements, ...

Maximizing the efficiency of Java Script code

I am struggling with optimizing this JavaScript code that adds and removes classes based on the presence of a specific class in the next rows of a table. Can anyone provide some guidance on how to make this code more efficient? $(".showTR").click(functi ...

Issue with border in Bootstrap Grid Navigation Bar

I've experimented with margins, padding, and border options extensively, but I still can't get rid of the white space at the end of my navbar. Can anyone provide a simple solution, please? See the attached image for a clear visual of the issue. T ...