We use pa11y for automated accessibility testing as part of mandatory requirement for our application portals. For one of the portals we have a requirement such that we have a test user to login under the login page, then wait for the URL to be something, then under that something URL, there is a button, lets say X, that needs to be clicked to navigate to the next page that finally needs to be tested. As part of that everytime we run pa11y using the config.json file that contains the required Actions as per https://github.com/pa11y/pa11y#actions, but pa11y is unable to find the matching CSS selector for that button element. Using developer tools, if we inspect that button and right click, then copy, then copy selector the value is :-
#topButtonRow > input:nth-child(4)
Doesn't matter how i pass this value under Actions in the config.json file, pa11y fails to find it while running the tests. The document https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector doesn't explain everything.Everything else just works fine except for this CSS selector and that is what breaks the final navigation flow. Currently, i tried the below with so many different ways to escape any character outside of CSS selector Unicode set but still same error Error: Failed action: no element matching selector ......"
"actions":[
"set field #username to xxx",
"set field #password to xxx",
"click element xxx",
"wait for url to be https://xxx",
"navigate to https://xxx",
"click element #topButtonRow > input:nth-child(4)",
"wait for url to be https://xxx"
]
"click element #topButtonRow > input:nth-child(4)"