Answer a question

I have got a list of 25 elements that are clickable. I need to open each one of them in a new tab, scrape the new page opened in a new tab, then close it. Then go to the next element and do the same for each element in the list.

however, I am having problems opening the links in a new tab by clicking on them. I managed to open then with page.goto('link") but I want to make it more humanized and instead of pasting the link into the new tab I want to be opened by clicking.

let accountsClickElements = await page.$$eval(".result-lockup__name a", el => el.map(x => x.getAttribute("id")));
                                                                                        
 for (let i = 0; i<25; i++) {
     await autoScroll(page);
     await page.waitFor(3000);
     let id = companies[i];
     await page.focus("#"+accountsClickElements[0]);
     accountsClickElements = await page.$$eval(".result-lockup__name a", el => el.map(x => x.getAttribute("id")));
     await page.waitFor(3000);
     await page.focus("#"+accountsClickElements[i]);                             
     await page.click("#"+accountsClickElements[i]);
     await page.waitFor(2000);
     console.log("#"+companies[i].linid);
     await page.goBack(); 
  }                              `

This is a code that opens the links in the same tab, but after a while, it doesn't take all 25 elements and since id is changing every time I open the page I get an error.

I have changed the code like this so instead of clicking of the element, it is clicking on the href attribute. the target _blank attribute is there, but it still opening on the same tab. Can you point why?

await page.$$eval('.result-lockup__name a', el => el.map(x => x.setAttribute("target", "_blank")));
let accountsClickElements = await page.$$eval(".result-lockup__name a", el => el.map(x => x.getAttribute("href")));                                                                                                                  
for (let i = 0; i<25; i++) {
   await page.waitFor(2000);
   await autoScroll(page);
   await page.waitFor(2000);    
   await page.click('a[href="'+accountsClickElements[i]+'"]');
}

Answers

Middle click using page.click:

let options = {button : 'middle'};
await page.click('a[href="'+accountsClickElements[i]+'"]', options)

It might take some time for the new tab to open, which you can wait for with await page.waitForTimeout(1000).

Full code:

let accountsClickElements = await page.$$eval('.result-lockup__name a', el => el.map(x => x.getAttribute('href')));

browser.on('targetcreated', function(){                                            
    console.log(accountsClickElements[i]) 
})   

let options = {
    button : 'middle'
};
for (let i = 0; i<25; i++) {
    await page.waitForTimeout(2000);
    await page.focus('a[href="'+accountsClickElements[i]+'"]')                                                    
    await page.click('a[href="'+accountsClickElements[i]+'"]', options)
    const [tab1, tab2, tab3] = await browser.pages();
    await page.waitForTimeout(2000);
    await tab3.bringToFront();                                                                               
    await ListenCompanyPageNewTab(tab3); 
    await tab2.bringToFront();                                                            
}