Tips for modifying Capybara selectors on a website with css-modules

Question

Tips for modifying Capybara selectors on a website with css-modules

When writing our automated tests, a typical line of code we use looks like this:

find('.edit-icon').click

As we move towards incorporating css-modules in our project, I've been informed that class names could undergo significant changes. A peculiar example of this is a website that uses emojis in its class names (seen when inspecting the page):

css modules by Glenn Maddern

How can I best prepare for such a drastic change? I anticipate many of our specifications breaking, and I am concerned about the possibility of being unable to create tests at all with this new technology in our project.

css selenium rspec capybara css-modules

Answer 1

Answer №1

By utilizing custom capybara selectors, you have the ability to abstract the actual css query into a single location. There was a mention in your comments about the necessity to switch to a class attribute that begins with a specified value.

Capybara.add_selector(:class_starts_with) do
  css { |locator| "[class^=\"#{locator}\"]"
end

This snippet above achieves that functionality and can be utilized like so:

find(:class_starts_with, 'something')

Alternatively, if you set Capybara.default_selector = :class_starts_with, then you can simply use:

find('something')

Instead of modifying the default_selector, another approach could be to create a helper method like find_by_class_start that simply calls the find method with :class_starts_with as an argument (similar to how Capybara's #find_field, etc work).

It is important to note that the custom selector mentioned above may only work effectively if there is only one class name set. If multiple class names are expected, you may need to adjust the selector to include both the starts with and contains logic like this:

"[class^=\"#{locator}\"], [class*=\" #{locator}\"]"

Answer 2

By utilizing custom capybara selectors, you have the ability to abstract the actual css query into a single location. There was a mention in your comments about the necessity to switch to a class attribute that begins with a specified value.

Capybara.add_selector(:class_starts_with) do
  css { |locator| "[class^=\"#{locator}\"]"
end

This snippet above achieves that functionality and can be utilized like so:

find(:class_starts_with, 'something')

Alternatively, if you set Capybara.default_selector = :class_starts_with, then you can simply use:

find('something')

Instead of modifying the default_selector, another approach could be to create a helper method like find_by_class_start that simply calls the find method with :class_starts_with as an argument (similar to how Capybara's #find_field, etc work).

It is important to note that the custom selector mentioned above may only work effectively if there is only one class name set. If multiple class names are expected, you may need to adjust the selector to include both the starts with and contains logic like this:

"[class^=\"#{locator}\"], [class*=\" #{locator}\"]"

Tips for modifying Capybara selectors on a website with css-modules

Answer №1

Similar questions

Could we incorporate a backwards typewriter animation?

Showing a hidden div after an unsuccessful AJAX call

Tips for dynamically adjusting the size of a div container according to the user's

Creating a New Section in your HTML Table

What is the best way to extend an image to fill the width of a webpage?

The function window.stop() using execute_script() does not function properly in chromedriver, but it runs smoothly in geckodriver

How can the carousel item numbers be adjusted for proper display?

Does the html label prevent propagation from occurring?

The Selenium webdriver encountered difficulty in locating an element within a modal dialog

Can one retrieve the complete URL of an image that is referenced in CSS using Selenium IDE?

Difficulties encountered with marking tests as skipped in Selenium tests involving sausages utilizing Sauce Labs

The hover effect does not carry over to duplicated HTML

Encountering a problem while extracting information from the McMaster-Carr website

Issues arise within the Docker container due to an error stating "unable to initiate a new session thread"

Is there a way to deactivate a JavaScript function on a specific webpage using CSS?

Adding a Click class can cause significant disruption to the entire CSS layout

Specflow functionality seems to be intact while running tests, but encounters failures during the debugging process

The theme font fails to take effect on the paragraph

Resize a span's width using the width of another element using only CSS

The Angular 6 ngb-bootstrap modal fails to display due to conflicting bootstrap css within a div element