CSSHelp.getStyle() may be too strict #526
Description
Describe the bug
The method CSSHelp.getStyle() tests for an exact class name match. If the tested css selector contains the expected class plus the element tag, the test that uses CSSHelp.getStyle() fails. An example of this uses Test 13 at https://www.freecodecamp.org/learn/full-stack-developer/lab-blog-post-card/lab-blog-post-card
.read-more:hover{background: yellow;} /* passes test */a.read-more:hover{background: yellow;} /* fails */To Reproduce
- Go to https://www.freecodecamp.org/learn/full-stack-developer/lab-blog-post-card/lab-blog-post-card
- Use sample html / css:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<a class="read-more" href="https://example.com/web-development"
>Read More</a
>
</body>
</html>a.read-more:hover {
background: yellow;
}- See test 13 fail (it passes with the sample code if the
ais removed from the selector.
Expected behavior
I would have liked to see my test pass even with the a present in the selector, as this aligns with the spirit of what was being tested.
Screenshots
Additional context
I was advised in discord to raise the issue to discuss it here. I'm not sure if changing the strict equality test for .includes() is advisable, as I cannot guarantee this won't introduce more issues with respect to other lab tests.
Alternative approach
Instead of altering CSSHelp.getStyle(), we could add to the Get Help button a sort of FAQ that include advice such as:
If tests are not passing, you should ensure your CSS selectors match verbatim the way the selectors are defined in the tests.
I'm not sure if this already exists.