Html Question posted in
Some basic documentation can be found here.

Html – How to click id by Puppeteer, but id is changed each access?

I want to click check-box inperson name by using Puppeteer.
And the person name has unique id which is diffrent each time.

  1. I have tried to make this method
const selector = '#id^="/^[A-Za-z0-9_]+-[0-9]+/g"';
await page.click(selector)

But Puppeteer says error which is:

    DOMException: Failed to execute 'querySelector' on 'Document': '#id^="/^[A-Za-z0-9_]+-[0-9]+/g"' is not a valid selector.

I thought my reguler expression is wrong so I made sure its correct.

const id = '9538-0';
const regex = /^[A-Za-z0-9_]+-[0-9]+/g;
const found = id.match(regex);
console.log(found); // [ '9538-0' ]
  1. Here is HTML at check box.
<div class="e-content e-dropdownbase" _ngcontent-ng-c184323="" data-ripple="true" style="max-height: 300px;">
  <ul class="e-list-parent e-ul" _ngcontent-ng-c184323="" role="listbox" tabindex="0" id="ej2_multiselect_1_options" aria-hidden="false" aria-label="list">
    <li class="e-list-item e-hover" id="9538-0" _ngcontent-ng-c184323="" role="option" data-value="i-9999999">
        <div class="e-checkbox-wrapper e-css" _ngcontent-ng-c184323="">
          <span class="e-ripple-container" _ngcontent-ng-c184323="" data-ripple="true"></span>
          <span class="e-frame e-icons" _ngcontent-ng-c184323=""></span>
</div>

       <span _ngcontent-ng-c184323="" class="recipient-item-desktop">MIKE CHASE (12345086)</span>
       <span _ngcontent-ng-c184323="" class="recipient-item-desktop">AGO</span>
       <span _ngcontent-ng-c184323="" class="recipient-item-desktop">$0.00</span>
    </li>
   </ul>
</div>

  1. And this is snapshot
    enter image description here

  2. my software versions
    Lang : JavaScript
    node.js : v20.16.0 (node -v)
    Puppeteer : [email protected] (npm list –depth=0)

Could you please teach me why I am not able to click check box by ID(id="9538-0") or
How to do it best.

Thank you for your time.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Or can I click just name which is "MIKE CHASE (12345086)"? I code this:

    const link1 = await page.evaluateHandle(
      text => [...document.querySelectorAll('span')].find(span => span.innerText ===  'MIKE CHASE (12345086)')
);
          await link1.click();

    It seems ok, its clicked, but another name gonna error, for example '___MIKE CHASE (12345086)' and error message is:

              await link1.click();
                      ^

TypeError: link1.click is not a function

    How I can through this error? Because I wanna pass through it if the name is match.


  2. 0

    Puppeteer uses CSS selectors, which do not support regex.

    You can try something like this, and it should work:

    const selector = '#9538-0';

    If the name always appears first in the DOM, you could also use a positional CSS selector.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search