Pass the right valid CSS Selector for an element in pa11y Actions

117 Views Asked by At

I have a Login button on a page which has below element in HTML :-

<input value=" Login " class="btn" name="login" title="Login" type="button" onclick="someURL">

This button is located under below div :-

<div class="pbHeader">
  <table border="0" cellpadding="0" cellspacing="0">
    <tbody>
      <tr>
        <td class="pbTitle">
          <img src="***" alt="" width="1" height="1" class="minWidth" title="">
          <h2 class="mainTitle">User Detail</h2>
        </td>
        <td class="pbButton" id="topButtonRow">
          <input value=" Edit " class="btn" name="edit" title="Edit" type="button" onclick="***">
          <input value="Sharing" class="btn" name="shr" title="Sharing" type="button" onclick="***">
          <input value="Reset Password" class="btn" name="resetPW" title="Reset Password" type="button" onclick="***">
          <input value=" Login " class="btn" name="login" title="Login" type="button" onclick="***">
        </td>
      </tr>
    </tbody>
  </table>
</div>

If i directly copy the CSS selector for this element it turns out to be

#topButtonRow > input:nth-child(4)

But if i pass this as CSS selector under pa11y Actions in a config file as below :-

{
    "chromeLaunchConfig": {
      "args": [
        "--no-sandbox",
        "--disable-setuid-sandbox",
        "--disable-dev-shm-usage"
      ]
    },

  "actions":[                     
    "set field #username to ***",
    "set field #password to ***",
    "click element #Login",
    "wait for url to be https://***",
    "navigate to https://***",
    "click element #topButtonRow > input:nth-child(4)",
    "navigate to https://***"                                                                
  ],
  "timeout": 120000
}

i get the error as :-

Error: Failed action: no element matching selector "#topButtonRow > input:nth-child(4)"
    at Object.run (C:\Users\***\AppData\Roaming\npm\node_modules\pa11y\lib\action.js:76:11)
    at processTicksAndRejections (internal/process/task_queues.js:93:5)
    at async runAction (C:\Users\***\AppData\Roaming\npm\node_modules\pa11y\lib\action.js:29:2)
    at async runActionsList (C:\Users\***\AppData\Roaming\npm\node_modules\pa11y\lib\pa11y.js:268:4)
    at async runPa11yTest (C:\Users\***\AppData\Roaming\npm\node_modules\pa11y\lib\pa11y.js:75:2)
    at async C:\Users\***\AppData\Roaming\npm\node_modules\pa11y\node_modules\p-timeout\index.js:50:13

I know as per https://github.com/pa11y/pa11y#click-element we can select any valid query selector to pass element CSS Selector under https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector However, unable to find the right CSS selector to pass for pa11y to work. I tried all combinations of using class name, input name, etc., but none worked. Just need the valid selector for the Login button element that pa11y recognizes or if its about any valid CSS selector supported by CSS querySelector as documented under :-

https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector#see_also

https://www.w3schools.com/cssref/css_selectors.php

Any help here would be greatly appreciated.

Thanks!

0

There are 0 best solutions below