When you work with Pa11y you may get errors as I described in an earlier blog post:
|
1 2 3 4 |
Error: This element has insufficient contrast at this conformance level. Expected a contrast ratio of at least 4.5:1, but text in this element has a contrast ratio of 3.13:1. Recommendation: change background to #0a8927. ├── WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.Fail ├── html > body > div > div:nth-child(4) > div:nth-child(1) > div > div:nth-child(2) > a └── <a href="https://www.goodreads.com/user/show/26287713-johnny-graber" class="btn btn-success">More on Goodreads</a> |
Sometimes you know exactly where this error comes from. In other times, you may need to use the CSS selector on line 3 to find the problem. Older versions of Chrome had the search for CSS locators at a discoverable spot on the user interface. Unfortunately, these times are long gone.
You can find the search by CSS locator in the developer tools (F12) on the tab “elements”. First select any element in the elements window and then use CTRL+F to open the search box at the bottom of this window:
If you now paste your CSS selector in the search box and hit Enter, the matching element is highlighted in the elements window above.
If you hoover over that selected part of the HTML, Chrome will also highlight the element on the web page:
This feature is not as discoverable as it was years ago, but as soon as you know the new location you can find your elements without any problems.
1 thought on “Locate an Element Using a CSS Selector in Google Chrome”