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();

当我运行这与任何网站一样 'node screenshot.js "https://github.com/login"' 它按预期工作，但对于故事书，它根本无法找到元素，即使我无法 select 从控制台正常找到它们。故事书有什么不支持木偶操作的吗？在无头浏览器的故事书组件上是否有不同的工具hover/click？

Answer 1

Storybook 在 iframe 中显示 components/elements，这意味着常规 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();

Puppeteer css 选择器无法使用故事书？

Puppeteer css selectors not working with storybook?

css

storybook

puppeteer