CSS: Select elements that contain another selector
CSS4 comes with
:has
Show archive.org snapshot
. E.g. h1:has(b) would select all <h1> tags that contain a <b> tag.
This is implemented in no browser Show archive.org snapshot but the jQuery query engine already supports it Show archive.org snapshot as a custom extension.
Related cards:
Test that a CSS selector is present with Cucumber
This note describes a Cucumber step definition that lets you test whether or not a CSS selector is present on the site:
Then I should see an element "#sign_in"
But I should not see an element "#sign_out"
Here is the step definition for C...
Cucumber: Test that an element is not overshadowed by another element
I needed to make sure that an element is visible and not overshadowed by an element that has a higher z-index (like a modal overlay).
Here is the step I wanted:
Then the very important notice should not be overshadowed by another element
`...
Capybara: Find an element that contains a string
There is no CSS selector for matching elements that contains a given string ยน. Luckily, Capybara offers the :text option to go along with your selector:
page.find('div', text: 'Expected content')
You can also pass a regular expre...
Check that an element is hidden via CSS with Spreewald
If you have content inside a page that is hidden by CSS, the following will work with Selenium, but not when using the Rack::Test driver. The Selenium driver correctly only considers text that is actually visible to a user.
Then I should not ...
Test that a select field contains an option with Cucumber
This note describes a Cucumber step definition that lets you say:
Then "Mow lawn" should be an option for "Activity"
But "Reply support mail" should not be an option for "Activity"
Note that this step checks whether an option is availabl...
Capybara: Find the innermost DOM element that contains a given string
Let's say you want to find the element with the text hello in the following DOM tree:
<html>
<body>
<article>
<strong>hello</strong>
<strong>world</strong>
</article>
</body>
</html>
You might think of XPath...
Spreewald: Check that a CSS selector is present on the current page
Spreewald 1.3.0 comes with these steps:
Then I should see an element ".panel"
Then I should not see an element ".sidebar"
Then I should see an element ".twitter-timeline"
We recommend to [define a selector_for method](https://githu...
RSpec: How to check that an ActiveRecord relation contains exactly these elements
To check which elements an ActiveRecord relation contains use the contain_exactly matcher.
describe User do
let!(:admin) { create(:user, role: 'admin') }
let!(:customer) { create(:user, role: 'customer') }
subject(:users) { Use...
Use jQuery's selector engine on vanilla DOM nodes
There are cases when you need to select DOM elements without jQuery, such as:
- when jQuery is not available
- when your code is is extremely performance-sensitive
- when you want to operate on an entire HTML document (which is hard to represent ...
Spreewald: Click on an element with a CSS selector
Spreewald 1.4.0 comes with this step:
When I click on the element ".sidebar"
We recommend to define a selector_for method in features/support/selectors.rb so you ...