Menu
How do you test if a div tag has a certain css style? I'm trying to test if it has display:none; or display:block.
I tried the following but its giving me an error:
it {should have_selector('signup_server_generic_errors', /display:\s*none/)} 
395
Using the browser’s developer tools to inspect the HTML elements is a great way to test different CSS properties and play around with different styling until you create an effect that suits your style. These changes are temporary, and as soon as the page is refreshed, the changes will disappear.
CSS style using jQuery ? + " if H1 has style, color = green."; Approach 2: Use hasClass () method to check an element contains certain CSS styles or not.
Navigate to the right-hand side Inspect Element window and you’ll be able to see the new CSS Class name (highlighted here in yellow). Before going straight to the stylesheet, you can test your CSS changes right in the Inspect Element console to see what effect it will have on your page. Let’s change the background color to yellow.
And paste it into either the style.css file of your Divi website’s child theme or into the Custom CSS box in the Divi Theme Options console. If you wanted to add the same style change to another row or module element in your website, you would need to add the same unique class name to the next element.
I'd recommend that instead of trying to locate the css style, you instead write your tests to find the css class name.
This way you can change the underlying css styling while keeping the class the same and your tests will still pass.
Searching for the underlying style is brittle. Styles change frequently. Basing your rspecs on finding specific style elements makes your tests more brittle -- they'll be more likely to fail when all you do is change a div's look and feel.
Basing your tests on finding css classes makes the tests more robust. It allows them to ensure your code is working correctly while not requiring you to change them when you change page styling.
In this case specifically, one option may be to define a css class named .hidden that sets display:none; on an element to hide it.
Like this:
css:
.hidden { display:none; } html:
<div class="hidden">HIDE ME!</div> capybara:
it {should have_css('div.hidden') } This capybara just looks for a div that has the hidden class -- you can make this matcher more sophisticated if you need.
But the main point is this -- attach styles to css class names, then tie your tests to the classes, not the styles.
54
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
