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"'它按预期工作，但对于故事书，它根本找不到元素，即使我不能从控制台中很好地选择它们。故事书中有什么东西不支持木偶师吗？有没有其他工具可以在无头浏览器中悬停/点击故事书组件？

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

以下是它在木偶师中的样子：

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