时间戳

首页 > 解决方案 > 在 Puppeteer 中使用函数参数作为 CSS 选择器

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

问题描述

底部是完整的代码。

基本上，我正在尝试创建一个函数，其中 css 选择器在函数参数中定义。（这是 //Defining Scrape Candidate Function）。当使用底部的代码时，我得到

"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;"]')

})();

标签： javascriptnode.jspuppeteer

解决方案

evaluate 内部的代码在您的 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);

};

推荐阅读