mirror of
https://github.com/web-infra-dev/midscene.git
synced 2025-07-30 04:13:50 +00:00
109 lines
3.4 KiB
Plaintext
109 lines
3.4 KiB
Plaintext
import SetupEnv from './common/setup-env.mdx';
|
||
|
||
# 集成到 Puppeteer
|
||
|
||
import { PackageManagerTabs } from '@theme';
|
||
|
||
[Puppeteer](https://pptr.dev/) 是一个 Node.js 库，它通过 DevTools 协议或 WebDriver BiDi 提供控制 Chrome 或 Firefox 的高级 API。Puppeteer 默认在无界面模式（headless）下运行，但可以配置为在可见的浏览器模式（headed）中运行。
|
||
|
||
:::info 样例项目
|
||
你可以在这里看到向 Puppeteer 集成的样例项目：[https://github.com/web-infra-dev/midscene-example/blob/main/puppeteer-demo](https://github.com/web-infra-dev/midscene-example/blob/main/puppeteer-demo)
|
||
|
||
这里还有一个 Puppeteer 和 Vitest 结合的样例项目：[https://github.com/web-infra-dev/midscene-example/tree/main/puppeteer-with-vitest-demo](https://github.com/web-infra-dev/midscene-example/tree/main/puppeteer-with-vitest-demo)
|
||
:::
|
||
|
||
<SetupEnv />
|
||
|
||
## 第一步：安装依赖
|
||
|
||
<PackageManagerTabs command="install @midscene/web puppeteer tsx --save-dev" />
|
||
|
||
## 第二步：编写脚本
|
||
|
||
编写下方代码，保存为 `./demo.ts`
|
||
|
||
```typescript title="./demo.ts"
|
||
import puppeteer from "puppeteer";
|
||
import { PuppeteerAgent } from "@midscene/web/puppeteer";
|
||
|
||
const sleep = (ms: number) => new Promise((r) => setTimeout(r, ms));
|
||
Promise.resolve(
|
||
(async () => {
|
||
const browser = await puppeteer.launch({
|
||
headless: false, // here we use headed mode to help debug
|
||
});
|
||
|
||
const page = await browser.newPage();
|
||
await page.setViewport({
|
||
width: 1280,
|
||
height: 800,
|
||
deviceScaleFactor: 1,
|
||
});
|
||
|
||
await page.goto("https://www.ebay.com");
|
||
await sleep(5000);
|
||
|
||
// 👀 初始化 Midscene agent
|
||
const agent = new PuppeteerAgent(page);
|
||
|
||
// 👀 执行搜索
|
||
// 注：尽管这是一个英文页面，你也可以用中文指令控制它
|
||
await agent.aiAction('在搜索框输入 "Headphones" ，敲回车');
|
||
await sleep(5000);
|
||
|
||
// 👀 理解页面，提取数据
|
||
const items = await agent.aiQuery(
|
||
'{itemTitle: string, price: Number}[], 找到列表里的商品标题和价格',
|
||
);
|
||
console.log("耳机商品信息", items);
|
||
|
||
// 👀 用 AI 断言
|
||
await agent.aiAssert("界面左侧有类目筛选功能");
|
||
|
||
await browser.close();
|
||
})()
|
||
);
|
||
```
|
||
|
||
更多 Agent 的 API 讲解请参考 [API 参考](./API)。
|
||
|
||
## 第三步：运行
|
||
|
||
使用 `tsx` 来运行，你会看到命令行打印出了耳机的商品信息：
|
||
|
||
```bash
|
||
# run
|
||
npx tsx demo.ts
|
||
|
||
# 命令行应该有如下输出
|
||
# [
|
||
# {
|
||
# itemTitle: 'JBL Tour Pro 2 - True wireless Noise Cancelling earbuds with Smart Charging Case',
|
||
# price: 551.21
|
||
# },
|
||
# {
|
||
# itemTitle: 'Soundcore Space One无线耳机40H ANC播放时间2XStronger语音还原',
|
||
# price: 543.94
|
||
# }
|
||
# ]
|
||
```
|
||
|
||
## 第四步：查看运行报告
|
||
|
||
当上面的命令执行成功后，会在控制台输出：`Midscene - report file updated: /path/to/report/some_id.html`， 通过浏览器打开该文件即可看到报告。
|
||
|
||
## 如何限制页面在当前 tab 打开
|
||
|
||
如果你想要限制页面在当前 tab 打开（比如点击一个带有 `target="_blank"` 属性的链接），你可以设置 `forceSameTabNavigation` 选项为 `true`：
|
||
|
||
```typescript
|
||
const mid = new PuppeteerAgent(page, {
|
||
forceSameTabNavigation: true,
|
||
});
|
||
```
|
||
|
||
## 更多
|
||
|
||
* 更多 Agent 上的 API 接口请参考 [API 参考](./API)。
|
||
* 更多关于提示词的技巧请参考 [提示词技巧](./prompting-tips)
|