Puppeteer与无头浏览器：自动化Web页面测试

自动化测试分享

于 2024-02-25 20:35:37 发布

阅读量979

点赞数 21

分类专栏：面试功能测试软件测试文章标签： pytest python 职场和发展功能测试 Puppeteer Web页面测试自动化测试

本文链接：https://blog.csdn.net/2301_76387166/article/details/136286911

版权

软件测试同时被 3 个专栏收录

339 篇文章 2 订阅

订阅专栏

功能测试

247 篇文章 0 订阅

订阅专栏

面试

156 篇文章 0 订阅

订阅专栏

2024软件测试面试刷题，这个小程序（永久刷题），靠它快速找到工作了！（刷题APP的天花板）_软件测试刷题小程序-CSDN博客文章浏览阅读2.6k次，点赞85次，收藏12次。你知不知道有这么一个软件测试面试的刷题小程序。里面包含了面试常问的软件测试基础题，web自动化测试、app自动化测试、接口测试、性能测试、自动化测试、安全测试及一些常问到的人力资源题目。最主要的是他还收集了像阿里、华为这样的大厂面试真题，还有互动交流板块……_软件测试刷题小程序https://blog.csdn.net/AI_Green/article/details/134931243?spm=1001.2014.3001.5502Puppeteer简介

Puppeteer是一个由Google Chrome团队开发的Node库，它提供了一套高级API来控制Chrome或Chromium浏览器。Puppeteer主要用于无头浏览器的场景，但也可以配置为运行“有头”模式（即常规的浏览器界面）。通过模拟真实用户的操作，如页面导航、表单填写、按钮点击等，Puppeteer在Web自动化测试、爬虫、页面渲染等方面展现出了巨大的潜力。在自动化测试领域，Puppeteer特别受到青睐，原因在于它的灵活性、易用性和功能强大。

Chrome无头模式

Chrome无头模式是Google Chrome浏览器的一个特性，允许在没有图形用户界面的情况下运行浏览器。这意味着你可以在后台执行Web页面渲染、执行JavaScript或进行自动化测试等操作，而无需打开浏览器窗口。对于自动化测试而言，无头模式具有以下几个优点：

速度快：由于不需要渲染图形界面，测试执行的速度更快。
环境兼容：可以在没有图形界面的服务器环境中运行测试，适合持续集成(CI)环境。
资源占用少：相比于全模式(Full mode)浏览器，无头模式占用更少的资源。

Puppeteer自动化测试的优势

高度模拟真实用户行为：Puppeteer能够模拟键盘输入、鼠标点击、表单提交等用户操作，以及更复杂的行为如拖拽、滚动等，使测试更接近用户实际使用情况。
无头模式提高测试效率：在无头模式下运行测试，即在后台运行浏览器实例，可以显著提高测试执行的速度，非常适合集成到持续集成/持续部署(CI/CD)流程中。
页面渲染和截图：Puppeteer可以渲染并截取页面的屏幕截图或生成PDF，这对于检查页面布局问题和文档生成非常有用。
网络请求控制：能够拦截和修改浏览器的网络请求，可以用来模拟不同的网络条件，或者测试应用对失败请求的处理能力。
可访问性测试：Puppeteer可以用来检查页面的可访问性，帮助开发者改进网站的无障碍访问能力。

Puppeteer自动化测试的应用场景

端到端(E2E)测试：模拟用户在整个应用中的操作流程，从登录到执行具体任务，再到登出，确保整个过程按预期工作。
性能测试：通过模拟用户加载页面和执行操作来评估应用的性能，包括加载时间、响应时间等。
爬虫：利用Puppeteer遍历网页并提取所需信息，特别是对于JavaScript渲染的内容。
自动化截图和PDF生成：自动化生成页面的截图或PDF文档，用于文档、报告或网站内容的备份。
UI测试：自动化测试用户界面元素是否按照设计显示，包括布局、颜色、字体等。

实战

这里以一个简单的登录页面为例，通过Puppeteer来实现自动化登录测试。

首先先准备一个登录页面login.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Login Page</title>
</head>
<body>
    <h2>Login Page</h2>
    <form id="loginForm">
        <div>
            <label for="username">Username:</label>
            <input type="text" id="username" name="username" required>
        </div>
        <div>
            <label for="password">Password:</label>
            <input type="password" id="password" name="password" required>
        </div>
        <button type="submit" id="loginButton">Login</button>
    </form>
    <div id="message"></div>

    <script type="text/javascript">
        document.getElementById('loginForm').addEventListener('submit', function(event) {
            event.preventDefault(); // 阻止表单默认提交行为

            var username = document.getElementById('username').value;
            var password = document.getElementById('password').value;

            if (username === 'admin' && password === '123456') {
                document.getElementById('message').textContent = 'Login successful!';
                document.getElementById('message').style.color = 'green';
                // 实际应用中，这里可以重定向到另一个页面
            } else {
                document.getElementById('message').textContent = 'Invalid username or password.';
                document.getElementById('message').style.color = 'red';
            }
        });

    </script>
</body>
</html>

页面布局如下：

页面在登录成功时，message元素会显示Login successful!，并且颜色变成绿色:

页面在登录失败时，比如账号密码不是admin和123456时，message元素会显示Invalid username or password.，并且颜色变成红色:

在本地先起一个静态服务器，将login.html放入服务器目录中。

这里需要做的是通过Puppeteer模拟登录成功和登录失败的情况。确保你已经安装了Node.js和Puppeteer。如果还没有安装Puppeteer，可以通过运行以下命令来安装：

npm install puppeteer

先贴testLogin.js代码：

const puppeteer = require('puppeteer');

(async () => {
    const browser = await puppeteer.launch({ 
        headless: true 
    });
    const page = await browser.newPage();
    await page.goto('http://127.0.0.1:8081/login.html');

    // 输入用户名和密码
    await page.type('#username', 'admin');
    await page.type('#password', '123456');
    await page.click('#loginButton');

    // 验证登录成功
    const url = await page.url();
    console.log(url); // 根据实际情况判断是否登录成功

    await page.waitForSelector('#message', { visible: true });

    // 获取消息元素的文本内容
    const message = await page.evaluate(() => document.querySelector('#message').textContent);

    // 打印消息文本
    console.log('Login message:', message);
    // 保存登录结果截图到本地
    await page.screenshot({ path: 'login.png' });
    // 关闭无头浏览器
    await browser.close();
})();

puppeteer.launch({ headless: true })启动了一个无头模式的Chrome实例。
page.goto导航到登录页面，
page.type用于在相应的输入框中输入用户名和密码，
page.click点击登录按钮。
page.waitForSelector等待message元素的展示
page.evaluate用来获取message元素的文本内容，用于后面打印
page.screenshot将登录的结果截图下来，并保存到本地

接下来启动testLogin.js：

node testLogin.js

可以看到Login successful!，说明模拟了成功登录

通过输入一个错误的用户名，比如admin1，并重新启动testLogin.js，可以看到成功模拟了失败登录

当然也可以关闭无头模式，即设置headless: false时，Puppeteer会以有界面（GUI）模式启动Chrome或Chromium浏览器。这种模式下，浏览器的窗口会被打开，用户可以看到页面的实时渲染过程，包括模拟用户交互、动画、导航等。

关闭无头模式后，重新启动testLogin.js, 会自动打开登录页面，自动填入账号和密码，并且点击Login按钮，以展示登录结果，效果如下：

到此就完成了模拟用户登录的行为，来进行自动化测试。尽管Puppeteer提供了强大的功能，但在实践中也面临一些挑战：

测试脚本的维护：随着应用的迭代，测试脚本可能需要频繁更新以适应新的用户界面和功能。
复杂场景的模拟：一些复杂的用户交互或边缘情况可能难以准确模拟。
资源消耗：虽然无头模式较高效，但在并发执行大量测试脚本时，仍然会占用大量的系统资源。

行动吧，在路上总比一直观望的要好，未来的你肯定会感谢现在拼搏的自己！如果想学习提升找不到资料，没人答疑解惑时，请及时加入群： 786229024，里面有各种测试开发资料和技术可以一起交流哦。

最后： 下方这份完整的软件测试视频教程已经整理上传完成，需要的朋友们可以自行领取【保证100%免费】

软件测试面试文档

我们学习必然是为了找到高薪的工作，下面这些面试题是来自阿里、腾讯、字节等一线互联网大厂最新的面试资料，并且有字节大佬给出了权威的解答，刷完这一套面试资料相信大家都能找到满意的工作。在这里插入图片描述

在这里插入图片描述

自动化测试分享

关注

21
点赞
踩
24

收藏

觉得还不错? 一键收藏
0
评论
Puppeteer与无头浏览器：自动化Web页面测试

Puppeteer是一个由Google Chrome团队开发的Node库，它提供了一套高级API来控制Chrome或Chromium浏览器。Puppeteer主要用于无头浏览器的场景，但也可以配置为运行“有头”模式（即常规的浏览器界面）。通过模拟真实用户的操作，如页面导航、表单填写、按钮点击等，Puppeteer在Web自动化测试、爬虫、页面渲染等方面展现出了巨大的潜力。在自动化测试领域，Puppeteer特别受到青睐，原因在于它的灵活性、易用性和功能强大。
复制链接

扫一扫