puppeteer page.evaluate 路径与测试 ID

Question

我正在尝试从人偶端到端测试中的 div 获取值。 html和js的pice有点像这样。问题是结果。当我运行这段带有 id 的代码时，它的结果实际上是 ' '，只是控制台中的一个空行。

但是，如果我将 },'[data-testid="TestID10"]') 与注释的代码行交换，我会在控制台中得到正确的响应 'Hello World'。（注意：使用完整 html 选择器路径在使用 puppeteer 时不是一个好习惯）

谁能告诉我为什么这对 ID 不起作用？以及我如何解决这个问题，因为使用 HTML 选择器确实是一种不好的做法。

亲切的问候！

const value1 = await page
        .waitForSelector('[data-testid="TestID10"]')
        .then(() => {
            return Promise.resolve(
                page.evaluate((path) => {
                    return window.document
                        .querySelector(path)
                        .value;
                },'[data-testid="TestID10"]')
            )
        });
    console.log(value1);
    
    //  },'#0-row-0 > div > div.TableCell.row-0.col-0.TextInputCell > div')

<div class="TextInputCell" data-testid="TestID10">
  <span class="value">Hello Word</span>
</div

Answer 1

以下对我来说效果很好。请注意，我将 selector 放入 variable 而不是使用字符串。另外，我返回的是 innerText，而不是您示例中的 value。 HTH

const puppeteer = require('puppeteer'); 

async function run() { 

const htmlStr = '<!doctype html><html><head></head>' +
  '<body><div class="TextInputCell" data-testid="TestID10">' +
  '<span class="value">Hello Word</span></div></body></html>';

  const browser = await puppeteer.launch({
      headless: false
  });
  const page = await browser.newPage();
  await page.setContent(htmlStr);    

  const selector = '[data-testid="TestID10"]';
  await page.waitForSelector(selector);

  var innerText = await page.evaluate((sel) => {
        return document.querySelector(sel).innerText;
  }, selector);

  console.log(innerText);

  browser.close();

};

run();

puppeteer page.evaluate 路径与测试 ID

puppeteer page.evaluate path vs test-ID

javascript

screen-scraping

end-to-end

web-scraping

puppeteer