Cypress testing pseudo CSS class :before
There's a way to assert on the CSS properties of pseudo-elements, although it's not as simple as just using a Cypress command.
- Use
cy.get()
to get a reference to the element. - Read the
Window
object off of the element, and then invokeWindow.getComputedStyle()
, which can read the computed CSS of pseudo selectors. - Use
getPropertyValue
on the returned CSS declaration to read the value of thecontent
property. - Assert on it.
Here's an example that works on the code posted in the OP:
cy.get('.myClass')
.then($els => {
// get Window reference from element
const win = $els[0].ownerDocument.defaultView
// use getComputedStyle to read the pseudo selector
const before = win.getComputedStyle($els[0], 'before')
// read the value of the `content` CSS property
const contentValue = before.getPropertyValue('content')
// the returned value will have double quotes around it, but this is correct
expect(contentValue).to.eq('"foo-"')
})
Cypress automation - control with pseudo css selector is always present in style
You can use the below to check whether the checkbox is checked or not.
To check whether the checkbox is checked:
cy.get(selector).should('be.checked')
To check whether the checkbox is not checked:
cy.get(selector).should('not.be.checked')
Combining pseudo element and pseudo class won't work
It seems that the CSS code #breadcrumbs li:nth-child(2)::before {content: ">"}
was fine, and the problem was due to id-class clashing in the html.twig template files.
What solved the issue was changing in breadcrumb.html.twig, from:
{% if breadcrumb %}
<nav class="breadcrumb" role="navigation" aria-labelledby="system-breadcrumb">
<h2 id="system-breadcrumb" class="visually-hidden">{{ 'Breadcrumb'|t }}</h2>
To:
{% if breadcrumb %}
<nav role="navigation" aria-labelledby="system-breadcrumb">
<h2{{ 'Breadcrumb'|t }}</h2>
Now, the #breadcrumbs
id directives, don't clash with either these of .breadcrumb
class, or #system-breadcrumb
id.
Finding elements: different syntax - different results - Explanation needed
contains('xdz')
is a cypress command which always yields only the first element containing the text. You can read more about it from this Github Thread.
:contains("xdz")
is a Jquery command and it returns all elements containing the text. You can read more about it from the Jquery Docs.
Cypress component testing is not loading CSS while running testcases
You can try importing the css in the index.ts or index.js file that will be available in the location -> cypress/support/index.ts
Trying to understand ::before - strange (to me) behavior?
::before pseudo-element in not actually a DOM element, appears on the page after DOM load. In this case everything is right - first li element is :first-child.
Related Topics
Website Layout "Breaks Apart" When Zooming in or Out in Browsers + a Few Other Basic CSS Questions
How to Use CSS Text-Overflow on Text That's Wrapping
Responsive Images Inline-Block in a Div with Bootstrap
Pure CSS Drop Down Menu - Unable to Keep Top <Li> Highlighted When Hovering Over Sub-Menu
How to Load One Style Sheet for Mobile Devices and One for Desktops
Line Height Default Value If Font Size Is 100%
Keep Image Ratio Using Max-Width and Max-Height in Ie 11
Crop an Image to Square Using Percentages and Max Widths
Polymer Core Transitions for Animated Pages with Core List Content
How to Make an Entire Div Clickable with CSS
A:Visited Doesn't Work in Mozilla Firefox
Selector for Even and Odd Level Children
Viewport for Ie10 & 11 Desktop, But Not Mobile
Can You Make Ie 9 (Or Earlier) Lay Out Table Elements as If They Were Regular Display:Block Elements