The particular object in the website, taiko is not able to click it

[SanjuSona-19]

Describe the bug
I am trying to click an object in the website with taiko custom selector, class and all other possible ways but it is not working. I will attach the screenshot and the HTML code for your reference.

I can't able to click that object using taiko.

To Reproduce
I will provide you the sample One signal account for you to work on.

1. Go to
   URL: https://app.onesignal.com/login
2. Click on
   Click on the OneSIgnal logo --> app name --> Messages --> Automated --> New Automated push -- > Send to particular segment(s) (radio button)
3. Scroll down to
   Here you can see the Subscribed User near that you can see a cross symbol need to make the taiko click it
   the HTML code is
   <div class="sc-flvzOl sc-gGsJSs iRUdKN"><div tabindex="0" class="sc-jUiVId sc-kecUPG eowKsL"><svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="currentColor" class="sc-bdVaJa AYviX"><path d="M9.15 8.09a.125.125 0 010-.177l4.632-4.63a.75.75 0 00-1.062-1.061L8.089 6.85a.125.125 0 01-.177 0L3.28 2.22A.75.75 0 102.22 3.283l4.63 4.631a.125.125 0 010 .177l-4.63 4.632a.749.749 0 00.53 1.28.75.75 0 00.53-.22l4.632-4.631a.125.125 0 01.177 0l4.63 4.631a.75.75 0 001.062-1.06L9.15 8.09z" fill="currentColor"></path></svg></div></div>
4. See error
   Error: Custom selector $(//input[@Class="sc-bdVaJa AYviX"]) not found
   Error: Custom selector $(p) not found

const { openBrowser, write, closeBrowser, goto } = require('taiko');
openBrowser();
 await click($('//input[@class="sc-bdVaJa AYviX"]',toRightOf('Subscribed Users')));
await click($('p',toRightOf('Subscribed Users')));

Logs

Error: Custom selector $(p) not found
    at findElements (/usr/local/lib/node_modules/taiko/lib/elementSearch.js:360:11)
    at async _click (/usr/local/lib/node_modules/taiko/lib/taiko.js:997:5)
    at async click (/usr/local/lib/node_modules/taiko/lib/taiko.js:1094:5)
    at async module.exports.<computed> (/usr/local/lib/node_modules/taiko/lib/taiko.js:3654:14)
    at async global.<computed> (/usr/local/lib/node_modules/taiko/bin/runFile.js:44:15)

Error: Custom selector $(//input[@class="sc-bdVaJa AYviX"]) not found
    at findElements (/usr/local/lib/node_modules/taiko/lib/elementSearch.js:360:11)
    at async _click (/usr/local/lib/node_modules/taiko/lib/taiko.js:997:5)
    at async click (/usr/local/lib/node_modules/taiko/lib/taiko.js:1094:5)
    at async module.exports.<computed> (/usr/local/lib/node_modules/taiko/lib/taiko.js:3654:14)
    at async global.<computed> (/usr/local/lib/node_modules/taiko/bin/runFile.js:44:15)

Expected behavior
Have to click the cross symbol near the Subscribed users as shown in the attached screenshot

Screenshots

Versions:

• Taiko: Version: 1.0.3 (Chromium: 81.0.3994.0) RELEASE
  [e.g. 1.0.23 (use taiko --version)]
• OS Ubuntu 20
  [e.g. 10.15.6 (19G2021) please be specific ]
• Node.js v13.14.0
  [e.g. v.12.18.14]

Additional context
Kindly provide more click options.

[zabil]

await click($('//input[@class="sc-bdVaJa AYviX"]',toRightOf('Subscribed Users')));

This Xpath does not seem to match the screenshot of the DOM this should've been

await click($('//svg[@class="sc-bdVaJa AYviX"]',toRightOf('Subscribed Users')));

Is there a reason why you use the input tag in your XPATH for matching?

[SanjuSona-19]

I have tried this
await click($('//svg[@class="sc-bdVaJa AYviX"]',toRightOf('Subscribed Users')));
even though I am getting error like this
Error: Custom selector $(//svg[@class="sc-bdVaJa AYviX"]) not found at findElements (/usr/local/lib/node_modules/taiko/lib/elementSearch.js:360:11) at async _click (/usr/local/lib/node_modules/taiko/lib/taiko.js:997:5) at async click (/usr/local/lib/node_modules/taiko/lib/taiko.js:1094:5) at async module.exports.<computed> (/usr/local/lib/node_modules/taiko/lib/taiko.js:3654:14) at async global.<computed> (/usr/local/lib/node_modules/taiko/bin/runFile.js:44:15)
I have tried input in the trial and error method. to see it work but it doesn't

[zabil]

Please try clicking on the a tag that surrounds the svg element instead i.e

<a role="button" class="..." 

You should try using css class selectors instead for example

await click($('a.hqyxfS'));

If you want to use multiple classes for matching you can read about it here https://stackoverflow.com/questions/2554839/select-element-based-on-multiple-classes about using class selectors.

Moving this to a discussion as this seems to be more about using the right selector instead of it being a bug.

[SanjuSona-19]

It worked thanks.