Warm tip: This article is reproduced from serverfault.com, please click

javascript-在Puppeteer中将函数参数用作CSS选择器

(javascript - Using function parameter as a CSS selector in Puppeteer)

发布于 2020-11-28 22:53:54

底部是完整代码。

基本上,我正在尝试制作一个在函数参数中定义css选择器的函数。(这是//定义抓取候选函数)。当使用底部的代码时,我得到

"UnhandledPromiseRejectionWarning: Error: Evaluation failed: ReferenceError: css is not defined"

其他一切都正常。

如果我定期插入css选择器,它也可以工作,因此,如果我使用以下代码,它就可以工作。

document.queryselector('.entry-1[style="box-sizing: border-box; float: left; position: relative; z-index: 104; height: 84.25px; width: 478.156px; border-top-style: none; border-left-style: none; display: block;"]')

我只复制并粘贴此行代码,但我想在网页上使用不同的CSS选择器重复此功能。

我不确定该如何解决。

const { email, password } = require('./config.json');
const { NS, ES ,SS ,NI, WW, EW ,NTW, CUML, DU, HNY, WY, SY, NM, SM, MER, MID, DN, LLR, SW, STAF, BIRM, CD, SOM, DGW, BNO, BS, HIOW, CSN, BH, ESX, SSX, K, NL, EL, WL, CL } = require('./regions.json');
const { selector1, selector2 } = require('./selectors.json');

const puppeteer = require('puppeteer');

(async () => {
//New Session
    const browser = await puppeteer.launch({headless: false, ignoreHTTPSErrors: true})
    const page = await browser.newPage()

//Defining Login Function
async function Login() {
    await page.goto('https://www.respublica.co/login');
    await page.type('input[type="email"]', email);
    await page.type('input[type="password"]', password);
    await page.click('button');
    await page.waitForNavigation();
    console.log('Succesfully Logged In as:', page.url());
}

//Defining Navigation Function
async function Navigate(region) {
    await page.goto(region);
    console.log('Navigated to', page.url());
    await page.waitForSelector('[style="position: absolute; box-sizing: border-box; z-index: 104; height: 300px; top: 0px; overflow-y: scroll; border-radius: 0px; width: 478.156px; left: 0px;"]');
}

//Defining Scroll Function
async function Scroll() {
    for (let step = 0; step < 5; step++) {
    await page.click('[style="position: absolute; box-sizing: border-box; z-index: 104; height: 300px; top: 0px; overflow-y: scroll; border-radius: 0px; width: 478.156px; left: 0px;"]');
    await page.waitForTimeout(500);
    await page.keyboard.press('Space');}
}

//Defining Scrape Candidate Function

async function FindCandidate(css) {
    let candidate1 = await page.evaluate(
        () =>  document.querySelector(css).innerText);
        console.log(candidate1);
}
//Run this code
try{
    await Login()
  } catch(err){
    console.log("Failed to log in");
  }

await Navigate(SM)
await Scroll()
await FindCandidate('.entry-1[style="box-sizing: border-box; float: left; position: relative; z-index: 104; height: 84.25px; width: 478.156px; border-top-style: none; border-left-style: none; display: block;"]')

})();
Questioner
George.M
Viewed
0
CyberT33N 2020-11-29 07:53:45

valuate内的代码在你的DOM中执行,这意味着未定义css,因为css当前仅在Node.js APP内。要将变量包括到DOM中,必须将其导入。

const FindCandidate = async css=>{

  const candidate1 = await page.evaluate(css=>{ 
    console.log('This will be print in your browser console.. css: ' + css);
    return document.querySelector(css).textContent;
  }, css);

  console.log(candidate1);

};