Playwright/Puppeteer 双支持！这款开源AI自动化框架太牛了！

爱吃香菜

1491人浏览 · 2025-06-13 22:24:19

爱吃香菜 · 2025-06-13 22:24:19 发布

📝 面试求职： 「面试试题小程序」，内容涵盖测试基础、Linux操作系统、MySQL数据库、Web功能测试、接口测试、APPium移动端测试、Python知识、Selenium自动化测试相关、性能测试、性能测试、计算机网络知识、Jmeter、HR面试，命中率杠杠的。（大家刷起来…）

📝 职场经验干货：

软件测试工程师简历上如何编写个人信息（一周8个面试）

软件测试工程师简历上如何编写专业技能（一周8个面试）

软件测试工程师简历上如何编写项目经验（一周8个面试）

软件测试工程师简历上如何编写个人荣誉（一周8个面试）

软件测试行情分享（这些都不了解就别贸然冲了.）

软件测试面试重点，搞清楚这些轻松拿到年薪30W+

软件测试面试刷题小程序免费使用（永久使用）

在软件开发测试领域，UI自动化测试一直是我们的“心头大患”。直到有这样一款UI自动化工具出现，有望打破这一局面。它就是由字节跳动 Web Infra 团队全新开源的一款 UI 自动化工具--Midscene.js，最大的亮点在于引入了多模态 AI 推理能力，只需用中文描述测试步骤，即可实现自动化操作，堪称“小白秒变测试专家”的终极神器！

在之前的分享《【大厂开源】一款AI 驱动的 UI 自动化框架，别错过！》中，我们详细介绍了Midscene.js的核心优势及技术原理，但如何确保其渲染准确性、交互稳定性？自动化测试是破局关键！

本期我们聚焦两大主流测试框架 Playwright与 Puppeteer，手把手教你搞定 MidScene.js 的 WebGL 自动化测试！

阅读本文你将收获：

集成 MidScene.js 到 Playwright；
集成 MidScene.js 到 Puppeteer；
两者集成的深度对比。

01 集成 MidScene.js 到 Playwright

1.1环境准备

npm install playwright
npm install midscene.js

1.2基本使用示例

我们通过一个简单的示例，看看如何使用集成后的工具进行网页操作。创建一个名为playwright - midscene - example.js的文件，输入以下代码：

const { chromium } = require('playwright');
const midScene = require('midscene.js');
(async () => {
const browser = await chromium.launch();
const page = await browser.newPage();
await page.goto('https://example.com');
// 
使用
MidScene.js
定位元素并操作
const targetElement = await midScene.findElement(page, 'cssSelector', 'button.specialButton');
if (targetElement) {
await targetElement.click();
}
await page.screenshot({ path: 'example.png' });
await browser.close();
})();

在这段代码中，我们先引入 Playwright 和 MidScene.js 库，接着启动 Chromium 浏览器并打开目标网页。

然后借助 MidScene.js 的findElement方法，通过 CSS 选择器定位到页面上特定的按钮元素，如果找到该元素，就执行点击操作，最后对页面进行截图并关闭浏览器。

1.3 集成到不同项目类型案例

1.3.1 Web 应用测试项目

在一个在线购物 Web 应用测试项目中，我们要测试用户登录功能。结合 Page Object 模式，我们可以这样实现：

首先，创建LoginPage.js文件：

const { chromium } = require('playwright');const midScene = require('midscene.js');class LoginPage {    constructor(page) {        this.page = page;    }    async login(username, password) {        const usernameInput = await midScene.findElement(this.page, 'cssSelector', 'input#username');        const passwordInput = await midScene.findElement(this.page, 'cssSelector', 'input#password');        const loginButton = await midScene.findElement(this.page, 'cssSelector', 'button.loginButton');        if (usernameInput && passwordInput && loginButton) {            await usernameInput.type(username);            await passwordInput.type(password);            await loginButton.click();        }    }}module.exports = LoginPage;

然后在测试用例文件login.test.js中使用：

const { test } = require('@playwright/test');const LoginPage = require('./LoginPage');test('Login to Shopping App', async ({ page }) => {    await page.goto('https://shoppingapp.com/login');    const loginPage = new LoginPage(page);    await loginPage.login('testUser', 'testPassword');    // 进行登录成功后的断言    const isLoggedIn = await page.isVisible('cssSelector', 'div.loggedInUserInfo');    expect(isLoggedIn).toBe(true);});

通过这种方式，利用 MidScene.js 精准定位元素，结合 Page Object 模式，使测试代码更具可维护性与复用性。

1.3.2 持续集成（CI）环境

以 GitLab CI/CD 为例，我们将集成了 MidScene.js 的 Playwright 测试集成到项目中。在项目根目录创建.gitlab-ci.yml文件，添加如下配置：

image: node:latest
stages:
- test
test:
stage: test
script:
- npm install
- npx playwright test
artifacts:
when: always
paths:
- playwright-report/

这样配置后，每次代码提交到 GitLab 仓库，都会自动安装项目依赖并运行 Playwright 测试，测试报告将保存在playwright-report/目录，方便后续查看和分析。

1.3.3 与其他测试框架结合

我们以与 Jest 框架集成来举例。首先安装相关依赖：

npm install --save-dev jest @types/jest playwright midscene.js

然后创建测试文件jest - integration.test.js：

const { chromium } = require('playwright');
const midScene = require('midscene.js');
const { expect } = require('@jest/globals');
describe('MidScene.js with Playwright in Jest', () => {
let browser;
let page;
beforeAll(async () => {
browser = await chromium.launch();
page = await browser.newPage();
});
afterAll(async () => {
await browser.close();
});
test('Find Element with MidScene.js', async () => {
await page.goto('https://example.com');
const targetElement = await midScene.findElement(page, 'cssSelector', 'h1.title');
expect(targetElement).toBeTruthy();
});
});

在 Jest 测试中，我们借助 MidScene.js 在 Playwright 的页面中查找元素，并进行断言验证，充分发挥了两种框架的优势。

1.4 高级功能集成

1.4.1 跨浏览器测试

利用 Playwright 对多浏览器的支持，结合 MidScene.js 实现跨浏览器测试。我们可以通过以下代码实现：

const { chromium, firefox, webkit } = require('playwright');
const midScene = require('midscene.js');
async function runTest(browserType) {
const browser = await browserType.launch();
const page = await browser.newPage();
await page.goto('https://example.com');
const targetElement = await midScene.findElement(page, 'cssSelector', 'button.actionButton');
if (targetElement) {
await targetElement.click();
}
await browser.close();
}
Promise.all([
runTest(chromium),
runTest(firefox),
runTest(webkit)
]);

1.4.2 移动端模拟

当我们需要对响应式 Web 应用进行移动端测试时，可以使用 Playwright 模拟移动设备浏览器，并结合 MidScene.js 操作页面元素。示例代码如下：

const { test, devices } = require('@playwright/test');
const midScene = require('midscene.js');
test.use({
...devices['iPhone 13 Pro'],
locale: 'en-US',
geolocation: { longitude: 12.492507, latitude: 41.889938 },
permissions: ['geolocation']
});
test('Mobile Test with MidScene.js', async ({ page }) => {
await page.goto('https://responsivewebsite.com');
const mobileMenuButton = await midScene.findElement(page, 'cssSelector', 'button.mobileMenuToggle');
if (mobileMenuButton) {
await mobileMenuButton.click();
}
});

1.4.3 网络请求拦截与模拟

利用 Playwright 的网络拦截功能，结合 MidScene.js 模拟不同网络环境。比如模拟慢速网络环境，测试应用在该环境下的表现：

const { chromium } = require('playwright');const midScene = require('midscene.js');(async () => {    const browser = await chromium.launch();    const context = await browser.newContext({        ignoreHTTPSErrors: true,        offline: false,        slowMo: 500 // 模拟慢速网络，延迟500ms    });    const page = await context.newPage();    page.on('request', (request) => {        if (request.url().includes('ads')) {            request.abort(); // 拦截广告请求        } else {            request.continue();        }    });    await page.goto('https://example.com');    const targetElement = await midScene.findElement(page, 'cssSelector', 'div.content');    if (targetElement) {        // 进行相关操作    }    await browser.close();})();

02 集成 MidScene.js 到 Puppeteer

2.1 环境搭建

npm install puppeteer
npm install midscene.js

2.2 基础代码示例

我们来看一个简单的 Puppeteer 与 MidScene.js 结合的脚本示例，实现启动 Chrome 浏览器、导航到网页、利用 MidScene.js 定位元素并获取其文本内容：

const puppeteer = require('puppeteer');
const midScene = require('midscene.js');
(async () => {
const browser = await puppeteer.launch();
const page = await browser.newPage();
await page.goto('https://example.com');
const targetElement = await midScene.findElement(page, 'xpath', '//div[@class="importantContent"]');
if (targetElement) {
const text = await targetElement.evaluate((element) => element.textContent);
console.log(text);
}
await browser.close();
})();

2.3 在不同场景下的集成应用案例

2.3.1 网页抓取项目

假设我们要抓取一个新闻网站的文章标题和内容，使用 Puppeteer 和 MidScene.js 可以这样实现：

const puppeteer = require('puppeteer');
const midScene = require('midscene.js');
(async () => {
const browser = await puppeteer.launch();
const page = await browser.newPage();
await page.goto('https://newswebsite.com');
const articleElements = await midScene.findElements(page, 'cssSelector', 'div.article');
for (const articleElement of articleElements) {
const titleElement = await midScene.findElement(articleElement, 'cssSelector', 'h2.title');
const contentElement = await midScene.findElement(articleElement, 'cssSelector', 'p.content');
if (titleElement && contentElement) {
const title = await titleElement.evaluate((element) => element.textContent);
const content = await contentElement.evaluate((element) => element.textContent);
console.log('Title:', title);
console.log('Content:', content);
}
}
await browser.close();
})();

2.3.2 自动化测试项目

以测试一个在线商城的商品添加到购物车功能为例，看看如何使用集成后的工具进行自动化测试：

const puppeteer = require('puppeteer');
const midScene = require('midscene.js');
(async () => {
const browser = await puppeteer.launch();
const page = await browser.newPage();
await page.goto('https://shopwebsite.com');
const productElement = await midScene.findElement(page, 'cssSelector', 'div.product[data - id="123"]');
if (productElement) {
const addToCartButton = await midScene.findElement(productElement, 'cssSelector', 'button.addToCart');
if (addToCartButton) {
await addToCartButton.click();
await page.waitForSelector('div.cartItem[data - id="123"]');
const isAdded = await page.isVisible('div.cartItem[data - id="123"]');
console.log('Product added to cart:', isAdded);
}
}
await browser.close();
})();

2.3.3 与现有项目架构融合

假设我们有一个基于 Express.js 的 Web 应用，想要集成 Puppeteer 和 MidScene.js 进行页面渲染或自动化测试。我们可以在项目中创建一个新的测试脚本puppeteer - test.js：

const puppeteer = require('puppeteer');const midScene = require('midscene.js');const express = require('express');const app = express();// 启动Express应用const server = app.listen(3000, () => {    console.log('Express app is running on port 3000');});(async () => {    const browser = await puppeteer.launch();    const page = await browser.newPage();    await page.goto('http://localhost:3000');    const targetElement = await midScene.findElement(page, 'cssSelector', 'div.mainContent');    if (targetElement) {        // 进行相关操作，如验证页面内容等    }    await browser.close();    server.close();})();