mirror of
https://github.com/web-infra-dev/midscene.git
synced 2025-11-30 17:11:16 +00:00
99 lines
2.8 KiB
Plaintext
99 lines
2.8 KiB
Plaintext
|
|
# Integrate with Puppeteer
|
|
|
|
import { PackageManagerTabs } from '@theme';
|
|
|
|
[Puppeteer](https://pptr.dev/) is a Node.js library which provides a high-level API to control Chrome or Firefox over the DevTools Protocol or WebDriver BiDi. Puppeteer runs in the headless (no visible UI) by default but can be configured to run in a visible ("headful") browser.
|
|
|
|
:::info Demo Project
|
|
you can check the demo project of Puppeteer here: [https://github.com/web-infra-dev/midscene-example/blob/main/puppeteer-demo](https://github.com/web-infra-dev/midscene-example/blob/main/puppeteer-demo)
|
|
:::
|
|
|
|
## Preparation
|
|
|
|
Config the OpenAI API key, or [customize model provider](./model-provider.html)
|
|
|
|
```bash
|
|
# replace with your own
|
|
export OPENAI_API_KEY="sk-abcdefghijklmnopqrstuvwxyz"
|
|
```
|
|
|
|
## Step 1. install dependencies
|
|
|
|
<PackageManagerTabs command="install @midscene/web puppeteer ts-node --save-dev" />
|
|
|
|
## Step 2. write scripts
|
|
|
|
Write and save the following code as `./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);
|
|
|
|
// 👀 init Midscene agent
|
|
const mid = new PuppeteerAgent(page);
|
|
|
|
// 👀 type keywords, perform a search
|
|
await mid.aiAction('type "Headphones" in search box, hit Enter');
|
|
await sleep(5000);
|
|
|
|
// 👀 understand the page content, find the items
|
|
const items = await mid.aiQuery(
|
|
"{itemTitle: string, price: Number}[], find item in list and corresponding price"
|
|
);
|
|
console.log("headphones in stock", items);
|
|
|
|
// 👀 assert by AI
|
|
await mid.aiAssert("There is a category filter on the left");
|
|
|
|
await browser.close();
|
|
})()
|
|
);
|
|
```
|
|
|
|
|
|
## Step 3. run
|
|
|
|
Using ts-node to run, you will get the data of Headphones on eBay:
|
|
|
|
```bash
|
|
# run
|
|
npx ts-node demo.ts
|
|
|
|
# it should print
|
|
# [
|
|
# {
|
|
# 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
|
|
# }
|
|
# ]
|
|
```
|
|
|
|
## Step 4: view the report
|
|
|
|
After the above command executes successfully, the console will output: `Midscene - report file updated: /path/to/report/some_id.html`. You can open this file in a browser to view the report.
|
|
|
|
## More
|
|
|
|
You may also be interested in [Prompting Tips](./prompting-tips.html) |