Chrome is able to interpret Behat CSS selectors, whereas Firefox struggles with them

Recently I began working with Behat and Selenium for website test automation. One issue I've encountered is that some CSS selectors work in Chrome but not in Firefox.

For instance, in my Behat code:

Then I press ".topmember-resultList .resultListItem .resultListInteractions div:nth-child(1)"

The 'Ipress' method looks for an element using the selector and clicks on it.

While this works perfectly in Chrome, the tests fail in Firefox because the element cannot be found. This problem seems to occur specifically when using nth-child, even though Firefox (48.0) should support it according to my knowledge.

Answer №1

When attempting to recycle code from chrome tests to firefox tests, a common issue arises.

To address this challenge, consider the following approach:

Begin by creating an abstract context where methods and steps that do not conflict in your tests can be placed. Subsequently, create two contexts that extend from your abstract class - one for chrome and one for firefox. By doing so, you can utilize the same method for both browsers, albeit with different code in each. (Be sure to distinctively define the browser context in your behat.yml file).

In the chrome context, incorporate your original method utilizing your functional cssSelector. In contrast, within the Firefox context, replicate the same method but employ a CssSelector compatible with firefox. Alternatively, using an Xpath selector is another viable option for firefox.

I trust this guidance proves beneficial.

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 consistently retrieve the count of records from a field that is constantly changing?

At the bottom of the tables within our application interface, there is a field displaying "Showing x to x of x entries", where x represents the number of entries present in the table. My objective is to develop a function that can retain the last 'x& ...

c#selenium

Having trouble getting StencilJS Bottomsheet to work properly? Looking for a way to smoothly slide up your content?

I've been working on creating a Bottomsheet in Stencil, but I'm facing an issue where it shows up suddenly when activated. My goal is to display the overlay when the active property is set, and then smoothly slide up the content. Below is my comp ...

javascript css web-component stenciljs

Issues with positioning images using media queries

Can anyone help me center an img when the viewport width is 320px? I've attempted different approaches but so far, nothing has been successful. .logo { width: 55px; height: 55px; margin: 10px 0 10px 30px; float: left; } @media only screen a ...

html css

Is there a way to verify if text was generated using CSS?

I am working with the following HTML structure: <h4 id="myModalLabel"></h4> In my CSS, I have set the content dynamically using the following code: #myModalLabel::after { content: "gebeurtenis"; } For a live example, you can check out t ...

html css behat

Designing a webpage - patterns in the background and images layered on top

I've been tasked with creating a webpage that resembles a theatrical stage. The design calls for the following layout: [curtain repeat][left curtain][stage][right curtain][curtain repeat] The left curtain, stage, and right curtain should maintain a ...

html css

Achieving consistent vertical alignment of text in different web browsers

I have thoroughly reviewed the existing links on this topic, but none of them have been useful in my specific case. Most solutions suggest a way to vertically move text so that it appears aligned. However, the issue I am facing is that the text is already ...

css firefox google-chrome cross-browser vertical-alignment

The termination of all instances is ensured by recursion when the end condition is reached

I am faced with the challenge of looping through a list of webElements and clicking on each one. However, due to the page refreshing after each click, I encounter a StaleElementReferenceException. The structure of each element is as follows: <img src=" ...

java selenium recursion webdriver

What methods are available to load sections of a complex SVG shape asynchronously?

I'm currently in the process of creating a website with a geographic map built using SVG, pulling data from OpenStreetMap. Due to its large size and potential for transformations such as zooming and moving, only a portion of it will be visible on the ...

javascript html css svg catiledlayer

Styling limitations encountered when using lang="scss" with scoped css

My current project involves using Quasar and I am attempting to style the first column of q-table: <style lang="scss" scoped> td:first-child { background-color: #747480 !important; } </style> Unfortunately, this code does not seem to have a ...

css vue.js vuejs2 quasar-framework

What are the differences between incorporating JavaScript directly into HTML and writing it in a separate file?

I need help converting this JavaScript embedded in HTML code into a standalone JavaScript file. I am creating a toggle switch that, when clicked, should go to a new page after the transformation. I am looking for the non-embedded version of the function. H ...

javascript html jquery css onclick

The only functioning href link is the last one

Currently, I am in the process of constructing a website using HTML and CSS. My goal is to create a white rectangle that contains 4 images, each serving as a clickable link redirecting users to different sections on the page. The issue I am facing is that ...

html css href

How to set up a static webdriver fixture and a generator in Pytest?

I am currently developing an automation test to detect any potential dead links in a WordPress plugin. In order to achieve this, I have implemented two helpful functions. The first function initializes a Selenium webdriver: @pytest.fixture(scope='ses ...

python selenium pytest generator fixtures

Keep the division visible once the form has been successfully submitted

Initially, I have created 3 divs that are controlled using input type buttons. These buttons serve the purpose of displaying and hiding the hidden divs. Within these divs, there are forms to store data. Currently, my goal is to ensure that the div that was ...

javascript jquery html css forms

Mobile FPS suffering due to slide-out drawer performance issues

My application features a drawer menu that functions smoothly on desktop, but experiences issues on mobile devices with noticeable lag. Within the header, I have implemented a boolean value that toggles between true and false upon clicking the hamburger i ...

css angularjs performance

Ensuring consistent placement and scrollability of two divs across all screen sizes

I am in need of a solution to fix the top and bottom divs in the given image. The scroll should only occur when there is overflow. <!DOCTYPE html> <html> <head> <script src="//code.jquery.com/jquery-1.9.1.min.js"></script> ...

javascript jquery html css

Extension Overlay for Chrome

I'm currently working on developing a Chrome extension, but I'm encountering some confusion along the way. Despite researching online, I keep receiving conflicting advice and haven't been able to successfully implement any solutions. That&ap ...

javascript jquery html css google-chrome

HTML elements are positioned in alignment

I'm currently working on a website and I need some assistance in aligning my images properly. Here's what I have tried: https://i.sstatic.net/suIVu.png However, I haven't been able to achieve the desired result with the following code: &l ...

html css image twitter-bootstrap alignment

SASS: a common thread connecting multiple applications

The scenario involves a web platform that aggregates various React apps, each with its own .scss files. The goal is to extract the common .scss into a library for convenience. Any suggestions on how best to accomplish this? It's important to note that ...

css reactjs npm sass

Interact with visible elements by automating mouse clicks with puppeteer

When attempting to click on various elements within a page, my goal is to do so only if they are visible. While achieving this in selenium with the is_displayed method was simple, I have struggled to find a similar approach in puppeteer. I attempted to imp ...

javascript selenium puppeteer

Is there a way to center li elements evenly on mobile devices, regardless of the text length?

Take a look at these two images showcasing my website on different devices: Mobile: https://i.sstatic.net/spsYj.png Desktop: https://i.sstatic.net/AvFiN.png I have organized the content using simple ul and li tags. How can I adjust the layout so that ea ...

css twitter-bootstrap

CSSer Q&A