Puppeteer CSS 选择器不适用于故事书？

Question

const puppeteer = require('puppeteer');

async function run () {
    const browser = await puppeteer.launch();
    const page = await browser.newPage();
    await page.goto(url);
    await page.$eval('input[type=submit]', el => el.click());
    await page.screenshot({path: 'screenshot.png'});
    browser.close();
}
run();

当我在任何网站上运行此命令时，例如 '节点截图.js“https://github.com/login”' 它按预期工作，但对于故事书，它根本找不到元素，即使我无法从控制台中选择它们。故事书有什么不支持木偶师的吗？是否有其他工具可以在无头浏览器中悬停/单击故事书组件？

Answer 1

Storybook 在 iframe 中呈现组件/元素，这意味着常规的 document.querySelector 无法找到它们。

它似乎在控制台中工作的原因是，一旦您激活 iframe，控制台就会切换 document 的上下文，例如通过单击其中的任意位置，或将焦点集中在其内部的元素。

要解决该问题，请像这样找到 iframe（此示例使用 DOM API，您需要找到 puppeteer 方法来执行此操作）：

const iframe = document.querySelector('#storybook-preview-iframe');

然后，找到您的元素：

let el = iframe.contentDocument.querySelector('input[type=submit]');

这是在 puppeteer 中的样子：

const elementHandle = await page.waitForSelector('#storybook-preview-iframe');
const frame = await elementHandle.contentFrame();
await frame.waitForSelector('input[type=submit]');
const el = await frame.$('input[type=submit]');
el.click();