How to click button by id and innertext?

Question

I use puppeteer to get data from page. It have pagination (1,2,3). I need to click on a different button to open new page. But only difference between the buttons is innerText (1,2,3).

Button 1:

<a id="lbnGoToPage" href="javascript:__doPostBack('GoToPage','')">1</a>

Button 2:

<a id="lbnGoToPage" href="javascript:__doPostBack('GoToPage','')">2</a>

Button 3:

<a id="lbnGoToPage" href="javascript:__doPostBack('GoToPage','')">3</a>

How to select button 2 after I have finish get data from page one?

But why not use `document.querySelectorAll('[id=GoToPage]')` — mplungjan, Sep 03 '20 at 14:40
But how I can use to go to only one page? For example page 2 — FlutterFirebase, Sep 03 '20 at 14:42

hardkoded · Answer 1 · 2020-09-03T19:49:38.953

2

You can solve it using an XPath expression using page.$x:

const [link] = await page.$x('//*[@id="lbnGoToPage"][text() = "3"]');
await link.click();

In this case, that would click page "3".

edited Sep 03 '20 at 19:49

answered Sep 03 '20 at 14:47

hardkoded

18,915
3
52
64

Can I do this? ```var conlist = [];document.querySelectorAll('#lbnGoToPage').forEach(bt=>{bt.addEventListener('click', ()=>{const link = await page.$x(`//*[@id="lbnGoToPage"][text() = "${bt.innerHTML}"]`);await link.click();conlist.push(link);});});``` – Weilory Sep 03 '20 at 14:52
@Weilory what are you trying to accomplish there? – hardkoded Sep 03 '20 at 15:02
1

It seems this should be `const [link] = await page.$x();` as returned value is an array? – vsemozhebuty Sep 03 '20 at 17:39
1

Good catch @vsemozhebuty – hardkoded Sep 03 '20 at 19:49

How to click button by id and innertext?

1 Answers1