The updated Capybara now supports the CSS 'contains' selector

Before, my specifications had these lines:

within "h3:contains('FooBar text') + dl" do
  page.should have_content 'FizzBuzz'
end

(within the definition list following a header that contains specific text)

I recently updated capybara-webkit and now the 'contains' selector is not functioning
(which is understandable as it's deprecated in CSS3).

I'm struggling to find an easy way to rephrase this. Any suggestions?

Answer №1

To bypass the need to determine the xpath method, you have the option of utilizing Nokogiri::CSS.xpath_for. This function returns an array, so remember to access the first element using [0]

within :xpath, Nokogiri::CSS.xpath_for("<YOUR CSS SELECTOR>")[0] do

Answer №2

It seems like there was an upgrade done to capybara-webkit as well as capybara.

The latest version of Capybara, 2.1, now utilizes the driver's implementation of CSS selectors.

In the past, it functioned by converting CSS selectors to XPath using Nokogiri. Nokogiri had support for the :contains pseudo selector, which is why the code used to work.

You can modify it to use XPath instead:

within(:xpath, "//dl[preceding-sibling::h3[contains(text(),'FooBar text')]]") do
  page.should have_content 'FizzBuzz'
end

However, this may not be the most readable option. It might be better to opt for a more concise and understandable selector.

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

Is there a way to eliminate the horizontal line in my Table design?

Is there a way to eliminate the horizontal line from the table? css, html <table border="1" style="width:100%; border-collapse: collapse"> <tr> <th>Prepared By:</th> <th>Released ...

HTML source does not contain nested link elements for linked areas with nested hyperlinks

I want to create a visually and functionally appealing hyperlink within a larger rectangular shape that spans the full width of the page and is also a hyperlink itself. Below, you'll find an ASCII-art representation of what I'm trying to achieve: ...

My code gets disrupted when I switch between ids and classes

I'm currently learning about javascript and jquery, attempting to implement various scripts. I successfully executed the following script: jQuery(document).ready(function($) { var scroll_start = 0; var startchange = $('#homepage-header' ...

Styling text by reducing its size with CSS

Utilizing a CSS class to truncate text in the accordion header, which includes both a URL and plain text fields that need to be displayed on the same line. Desired Output: .../abc/xyz Count:42 Current output: .../abc/xyz Count:42/ (An odd slash is ...

Ways to avoid Parents Click Event from triggering during a Child's (Grandchild's) click event

My parent div has a unique feature where clicking on it reveals one of the child divs, and clicking again toggles the visibility of the child div. Inside this child div, there is a switch toggle that functions as a hidden checkbox. The issue I'm facin ...

Guide on How to Show Only the Initial Word of an H2 Header Using JavaScript or CSS

Is there a way to display only the first word from an h2 heading? For instance: In the website's source code, it would appear like this <h2> Stackoverflow is an Ideal Place</h2> But on the live website, it should be displayed like this ...

I am encountering an issue with the Link tag from next/link that is throwing an error. The error message states: "React.Children.only expected to receive a single React element

Hey everyone, I've come across an issue with using next/link in my code. Every time I replace the anchor tag with the "Link" tag, I encounter an error. I've searched for a solution but haven't found one yet. Any help would be greatly appreci ...

Avoid button wrapping in Bootstrap 4 navbar

Is there a way to make the search bar shrink on mobile view while keeping everything in line? Currently, the button is wrapping underneath the search bar. Check out the solution on JSFiddle body { margin: 10px; } .navbar-container { display: fle ...

When Google Chrome encounters two variables or functions with the same name, how does it respond?

I am curious what happens when Google Chrome encounters two variables with the same name. In my particular case, this issue arises in the code snippet available at this link, which is a small portion of the entire code. I am facing an issue where placing C ...

Can a container be sized based only on the width of one of its children?

Take a look at this snippet of html: <div class="container> <div class="header"> </div> <div class="content"> </div> <div class="footer"> </div> </div> I am aiming for the containe ...

How can I use D3.js to form a circular group in an organization structure, link it with a circular image, and connect

Is it possible to create a radial grouped circle using d3.js, similar to the image below: https://i.sstatic.net/1Hwd2.jpg I have written some code as shown below. However, I am facing challenges in connecting every circle with a curved line and displayi ...

"Bootstrap 4 introduces a new feature where adjusting the spacing between columns causes them to wrap underneath one another

My goal is to create two divs that each take up 6 columns with a space of 1px between them. <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoA ...

Is there a way to modify the background of a div when a specific field within my component is true and the div is being hovered over?

When I hover over a div, I want the background color to change. Additionally, I need the color choice to be based on an element within my component. <div *ngFor="let u of users;" [style:hover.background-color] = "u.selected ? 'red ...

Conflicts in SwiperJS Timeline Management

Having a Timeline on my Website using SwiperJS presents challenges with conflicting functions. The goal is to navigate swiper-slides by clicking on timespans in the timeline. The desired functionality for the timeline includes: Sliding to the correspondi ...

Switching Background Colors with CSS

Can you change background colors using only CSS3? I attempted to use keyframe animations, but they only transition the background color. I simply want the background color to change after 5 seconds with no transition or hover effects. If I can fade it in ...

Mobile devices not showing the Navbar bootstrap menu

My header.php works perfectly on desktop, but the navigation bar is not displaying properly on mobile devices. Here is my code: <!DOCTYPE html> <html> <head> <title>International Pvt. Ltd.</title> <meta name="viewpo ...

Following the submission of a message, the textarea automatically inserts a line-break

Can someone please help me troubleshoot an issue with my chat app? Every time I try to send a message, the textarea adds a line break instead of just focusing on the textarea so I can send a new message smoothly. I have recorded a video demonstrating the ...

Struggling to effectively align the footer div in a responsive design

Check out this GitHub link to access the HTML file and CSS: https://github.com/xenophenes/pgopen-splash2016 I'm facing an issue with the footer text alignment. Despite my efforts, I can't seem to center it properly as it keeps appearing slightly ...

Boosting vertical reach within a distance

How to make the green div adjust its height based on the content like the red div? This means that when the text in the green box increases, the height of the red box should also increase to match it. I am aware that removing the span from .aaa might solve ...

Using Selenium to click the "Accept cookies" button

Having trouble automating the download of data due to an issue with accepting the cookies message. from selenium import webdriver from selenium.webdriver.common.by import By from selenium.webdriver.support.ui import WebDriverWait from selenium.webdriver.su ...