PUPPETEER 클릭 후 새 페이지 탭 element 사용하기

📌Puppeteer를 이용하여 크롤링 중 클릭 후 새 페이지가 탭으로 뜨는 경우 ELEMENT가 사용이 안됐다.

🟢특정 PAGE 링크로 이동한다.

await page.goto(link, {
                    waitUntil: "networkidle2",
                    timeout: 30000,
});

🟢이동된 page 내에서 css selector로 값을 click하여 새 페이지를 띄운다.

await Promise.all([
page.$eval(`div#company_info_list>div>div > h2 > a`, element =>element.click()]);

✅ 새페이지가 뜨는 경우에서 크롤링을 진행 한 적이 없기 때문에 기존과 동일하게 작업을 진행하려고 했다

var result = await page.evaluate((el, docSelectors) => {
 //현재 열려있는 페이지내에서 크롤링 작업 진행 
 //크롤링 후 return으로 작업 데이터 전달.
}, body, docSelectors);

위와 같이 코드를 작성할경우 "page"에는 기존 초기에 열렸던 사이트가 
들어가 있기 때문에 클릭시 열린 탭에서 작업을 할 수 없다. 
따라서 새로운 탭을 이용하기 위해서는 해당 탭을 꺼내서 이용해야한다. 

💻 해결 방법! (아래 링크를 참고했다!)

https://stackoverflow.com/questions/45806684/puppeteer-how-to-handle-multiple-tabs

await new Promise(resolve => setTimeout(resolve, params.rule.docSelectors.crawlerInterval));

const pages = await browser.pages();
var body = await pages[2].$('body');

새롭게 열린 page들은 배열형식으로 값을 가져올 수 있었다. 
pages에 현재 브라우저에 열린 페이지들을 가져오고 향후 사용시에는 
pages[2] <- 이런식으로 3번째 탭을 특정하여 이용할 수 있다.
(배열은 0부터 시작하기 때문에 3번 째 탭이라고 말한 것이다.)

여기서 중요한 점은 클릭 후 setTimeout을 통해  특정 시간만큼 대기 시간을 주었는데 , 
새 탭이 로드되기 전까지 시간을 준 것이다. 
로드 되기전에 const pages = await browser.pages();를 통해 
페이지를 넣으면 아직 열리지 않은 새탭은 포함되지 않기 때문이다.
stackoverflow에서는 waitForSelector, waitForNavigation을 
이용하여 새페이지 로드를 기다릴 수 있다고 되어있으나 나는 
해당 코드가 timeout이 계속 발생하여 setTimeout으로 해결했다.