Puppeteer에서 요소를 쿼리할 때 `page.evaluate()`가 빈 개체를 반환하는 이유는 무엇입니까?

Puppeteer: page.evaluate querySelectorAll 딜레마

Puppeteer에서 page.evaluate() 함수를 사용할 때 일부 사용자에게 다음과 같은 문제가 발생했습니다. 결과적으로 빈 객체의 배열을 받습니다. 이 수수께끼 같은 동작은 평가 함수 내에서 직렬화 가능한 값을 반환해야 하기 때문에 발생합니다.

인기 있는 소셜 뉴스 집계 웹사이트 Reddit에서 제목 요소를 추출하는 것이 목표인 다음 Puppeteer 코드를 고려해 보세요.

const browser = await puppeteer.launch();

const page = await browser.newPage();
await page.goto('https://reddit.com/');

let list = await page.evaluate(() => {
  return Promise.resolve(Array.from(document.querySelectorAll('.title')));
});

console.log(JSON.stringify(list))

await browser.close();

이 코드를 실행하면 문제 설명에 언급된 것과 유사한 빈 개체 배열이 반환될 수 있습니다. 그 이유는 DOM 요소가 JSON으로 직접 직렬화되지 않지만 Puppeteer는 어쨌든 이를 문자열화하려고 시도하기 때문입니다.

이 문제를 해결하려면 코드가 요소에서 원하는 값을 추출하고 반환해야 합니다. JSON 직렬화 가능 형식으로 제공됩니다. 이 경우 제목 요소의 href 속성은 실제 제목 링크를 보유합니다. 이를 얻으려면 코드를 다음과 같이 수정할 수 있습니다.

let links = await this.page.evaluate((sel) => {
        let elements = Array.from(document.querySelectorAll(sel));
        let links = elements.map(element => {
            return element.href
        })
        return links;
    }, sel);

위 내용은 Puppeteer에서 요소를 쿼리할 때 `page.evaluate()`가 빈 개체를 반환하는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!