playwright Faker生成测试数据，Web测试目标与Playwright，利用AI解决登录问题

程序员的世界你不懂

924人浏览 · 2025-02-25 08:00:48

程序员的世界你不懂 · 2025-02-25 08:00:48 发布

1. 问题引入

1.1 真实场景

在自动化测试中，有一个case是更新用户手机号。如果每次使用同样手机号，系统会提示“手机号相同”的错误，所以要求脚本每次运行时候使用不同于上次的手机号号码。

1.2 方法探索

为了生成不同的手机号，有很多种方法可供选择。比如，最简单的方法是自己写一个随机数生成函数，生成一个随机的手机号。这种方法虽然简单，但维护和扩展性较差，生成的随机数也缺乏真实性。

另外就是寻求第三方库，比如Faker。 Faker是一个强大的库，可以生成各种各样的伪数据，包括手机号、姓名、地址等，非常适合用来做测试数据生成。

2. Faker使用简介

2.1 快速上手

以JavaScript版本的Faker为例

安装`Faker`库：

npm install @faker-js/faker

使用`Faker`生成随机数据：

const { faker } = require('@faker-js/faker');

function generateRandomPhone() {
    return faker.phone.number();
}

console.log(generateRandomPhone());

这样，每次运行generateRandomPhone函数时，都会生成一个新的随机手机号。

中文支持

默认faker仅支持英文数据，但该库已内置超过60多种语言，包括中文支持在内：

具体使用，也很简单：

import { fakerZH_CN as faker } from '@faker-js/faker'

const phoneNumber = faker.phone.number('139########');

//代码中使用即可：
await page3.locator('.el-input__inner').nth(4).fill(phoneNumber);

2.2 `Faker`其他功能

除了生成手机号，Faker还可以生成各种其他类型的联系信息和数据：

生成人员信息

console.log(faker.name.fullName());       // 生成随机姓名
console.log(faker.internet.email());      // 生成随机电子邮件
console.log(faker.name.jobTitle());       // 生成随机职业

生成地址信息

console.log(faker.address.streetAddress());    // 生成随机地址
console.log(faker.address.city());             // 生成随机城市
console.log(faker.address.country());          // 生成随机国家

生成公司信息

console.log(faker.company.companyName());    // 生成随机公司名称
console.log(faker.company.catchPhrase());    // 生成公司口号

Faker库提供了丰富的接口，可以生成几乎所有需要的测试数据，这让我们的测试更加真实和多样化。

2.3 `Python`版本

对于使用Python进行测试的用户，可以通过以下方式使用Faker库：

安装`Faker`库：

pip install faker

使用`Faker`生成随机数据：

from faker import Faker
fake = Faker()

def generate_random_phone():
    return fake.phone_number()

print(generate_random_phone())

小结

利用Faker生成测试数据有很多好处：

• 真实性：生成的数据更加真实，接近实际使用场景。
• 多样性：可以生成多种类型的数据，满足不同测试需求。
• 便捷性：只需简单的代码即可生成复杂的数据结构，省时省力。
• 可维护性：使用第三方库生成数据，代码更加简洁，易于维护和扩展。总之，Faker是一个非常实用的工具，可以极大地提升我们的自动化测试效率和质量。如果你还没有尝试过，不妨在下次编写测试用例时使用Faker生成数据，感受一下它的强大之处。

参考链接

• https://fakerjs.dev

. `Web`测试的挑战

代码中的bug通常不会有人喜欢，它们不应该发生，并且需要努力去修复。它们很麻烦。在进入生产环境之前，测试人员的目标之一就是尽可能暴露这些问题。

生产环境有Bug？绝对不行！我们希望在用户看到之前修复这些错误。严重的错误可能会对系统、业务甚至声誉造成很大损害。每当错误进入生产环境时，我们都希望能够尽快找到并修复它们。

你是否喜欢创建测试来在问题发生前捕捉错误？嗯……这个问题比较难回答。大多数人都知道良好的测试可以提供关于软件质量的宝贵反馈，但并不是每个人都愿意为测试付出努力。

3.1 有关测试的抱怨

为什么有人不喜欢做测试呢？测试真的很难！以下是我经常听到的常见抱怨：

• 测试慢
• 测试脆弱
• 测试不稳定
• 测试没有意义
• 测试不赚钱
• 测试需要切换上下文

3.2 测试金字塔策略

历史上，当团队制定测试自动化策略时，通常会遵循“测试金字塔”，如下图所示，从上到下：

金字塔底部的测试被认为“更好”，因为它们离代码更近，更容易自动化，执行速度也更快。同时，它们也被认为不那么容易出现不稳定的问题，因此更容易维护。金字塔顶部的测试则正好相反：大、慢、昂贵。金字塔形状暗示团队应该花更多时间在金字塔底部的测试上，少在顶部的测试上花时间。

端到端（E2E）测试非常有价值。不幸的是，测试金字塔将它们标记为“困难”和“差”，主要是由于不良的实践和工具的不足。它还使得测试策略强调测试类别，而不是它们提供的反馈。

4. 现代`Web`测试目标

测试不需要很难，也不需要承受过去的问题。我们应该采取全新的方法来测试现代Web应用。

三个主要目标：

• 专注于构建快速反馈循环，而不是某种类型的测试。
• 使测试开发尽可能快速和无痛。
• 选择与开发工作流自然互补的测试工具。总的来说，这些目标强调结果和效率。

5. 引入`Playwright`

Playwright是一个现代Web测试框架，可以帮助我们实现这些目标。

• 它是Microsoft的一个开源项目。
• 它通过（超级快速的）调试协议操控浏览器。
• 它支持Chromium/Chrome/Edge、Firefox和WebKit。
• 它提供自动等待、测试生成、UI模式等功能。
• 它可以同时测试UI和API。
• 它提供JavaScript/TypeScript、Python、Java和C#的绑定。在本教程中，我们将使用TypeScript的Playwright。

5.1 工作原理介绍

Playwright采用了独特的浏览器自动化方法。

1. 首先，它使用浏览器项目而不是完整的浏览器应用。例如，这意味着您将测试Chromium而不是Google Chrome。浏览器项目更小，不使用那么多资源，Playwright还会为您管理浏览器项目，无需额外安装其他东西。
2. 其次，它高效地使用浏览器：而不是为每个测试启动一个完整的新浏览器实例，Playwright为整个测试套件启动一个浏览器实例。
3. 然后，从该实例为每个测试创建一个唯一的浏览器上下文。浏览器上下文本质上就像一个隐身会话：它有自己的会话存储和不与其他上下文共享的标签页。浏览器上下文的创建和销毁非常快速。
4. 然后，每个浏览器上下文可以有一个或多个页面。所有的Playwright交互都通过页面进行，如点击和抓取。大多数测试只需要一个页面。

Playwright会自动处理所有这些设置。

5.2 对比Selenium和Cypress

小结论

通过以上介绍，我们可以看到Playwright在现代Web测试中有着诸多优势。将继续深入学习如何使用Playwright来实现我们的测试目标。

借助chatpgt解决自动化登录失败问题

6. 问题描述

在某次自动化测试中，使用Playwright通过Chrome或Edge浏览器访问公司内部开发的平台Web端时，遇到了一个问题：在输入账号登录后，页面跳转到 http://test-demo/store/，并弹出了“503 Service Unavailable”错误。然而，当手动输入 https://test-demo/store/# 时，却可以正常访问。这一问题在其他Mac笔记本和Windows电脑上都没有出现。

7. 初步排查

我们首先从客户端入手，排查了以下几个可能的问题：

7.1 清除浏览器缓存和Cookies：

清理缓存和Cookies后，问题依旧存在。

7.2 检查浏览器扩展：

禁用所有扩展后重试，问题仍未解决。

7.3 更新浏览器：

确保浏览器为最新版本，问题依然存在。

7.4 检查DNS设置：

更换DNS服务器后，问题未解决。

7.5 检查代理设置：

确认没有代理设置干扰，问题仍在。

7.6 重置浏览器设置：

将浏览器设置恢复为默认状态，问题依旧。

8. 深入排查

由于客户端的常见问题都已排除，我们决定将排查范围扩大到服务器配置，特别是路由和重定向方面的问题。以下是详细的排查步骤和解决方法：

8.1 服务器日志分析

通过查看Nginx的错误日志，我们发现了如下错误：

2024/07/15 03:44:10 [error] 24#24: *195 client intended to send too large body: 1495458 bytes, client: 10.0.0.2, server: localhost, request: "POST /api/resource/service HTTP/1.1", host: "test-demo", referrer: "https://test-demo/store/"

这个错误提示客户端试图发送一个过大的请求体，导致服务器无法处理该请求。

8.2 chatgpt回答

找到问题，搜索可以解决。不过借用chatgpt，把问题输入后，反馈的解答更精准：

9. 问题解决

找到了解决方法，虽然不确定是否可行，但值得一试。但是从哪里入手，作为测试人员，对nginx服务配置可能不是特别熟悉，没有关系，继续给chatgpt提问：

如何针对以上错误提示，调整服务器上配置，比如nginx/1.25.3

以下是chatgpt的回复：

9.1 修改Nginx配置

打开Nginx配置文件:

Nginx的主配置文件通常位于 /etc/nginx/nginx.conf 或 /etc/nginx/conf.d/ 目录下的某个文件中。

增加或修改 `client_max_body_size` 指令:

在适当的配置块中（如 http、server 或 location 块），添加或修改 client_max_body_size 指令。

示例1：全局配置

http {
    ...
    client_max_body_size 10M;
    ...
}

示例2：特定服务器配置

server {
    ...
    client_max_body_size 10M;
    ...
}

示例3：特定位置配置

server {
    ...
    location /api/mcloud-store/resource/service {
        ...
        client_max_body_size 10M;
        ...
    }
    ...
}

以上示例将允许最大10MB的请求体大小，你可以根据需要调整此值。

保存并退出编辑器

修改完成记得要保存。

检查配置文件语法:

在命令行中运行以下命令，检查配置文件是否有语法错误：

sudo nginx -t

重新加载`Nginx`配置:

如果语法检查通过，重新加载Nginx配置以应用更改：

sudo systemctl reload nginx

验证更改

• 重新尝试请求，使用原来的客户端重新发送请求，检查是否还能遇到同样的错误。
• 检查日志文件，如果问题仍然存在，检查Nginx的错误日志和访问日志，以获取更多信息。

注意事项

• 适当的请求体大小: 设置合理的 client_max_body_size，不要过大，以免导致服务器性能问题。
• 安全性: 确保服务器和应用程序能够处理较大的请求体，并进行必要的验证和过滤，防止潜在的安全问题（如文件上传攻击）。通过上述步骤，你应该可以解决 client intended to send too large body 错误，并允许更大的请求体。

9.2 修改`docker`配置

前端服务Nginx运行在容器中。对于docker命令有些陌生，继续提问

服务运行在容器中，docker命令查看那个是nginx服务

chatgpt回复如下：在容器中运行的服务，通常通过docker命令来管理和查看。要找到运行Nginx服务的容器，可以按照以下步骤操作：

列出所有正在运行的容器

首先，使用以下命令列出所有正在运行的容器：

docker ps

查找`Nginx`容器

在输出的表格中，查找与Nginx相关的容器。你可以根据容器的名字、镜像名或其他相关信息来识别Nginx容器。例如，如果你看到类似以下的信息：

CONTAINER ID   IMAGE          COMMAND                  CREATED       STATUS       PORTS                NAMES
abcd1234       nginx:1.25.3   "nginx -g 'daemon of…"   2 hours ago   Up 2 hours   0.0.0.0:80->80/tcp   my-nginx-container

你可以看到镜像名是nginx:1.25.3，容器名是my-nginx-container。

进入`Nginx`容器

找到Nginx容器后，可以使用以下命令进入该容器的终端：

docker exec -it my-nginx-container /bin/bash

修改`Nginx`配置

进入容器后，按照前面提到的步骤编辑Nginx配置文件。通常，Nginx配置文件位于/etc/nginx/nginx.conf。使用以下命令编辑配置文件：

vi /etc/nginx/nginx.conf

或者，如果配置文件在其他路径，可以根据实际路径编辑。

保存并退出编辑器

在编辑器中修改client_max_body_size指令，保存并退出。

重新加载`Nginx`配置

在容器内部重新加载Nginx配置：

nginx -s reload

退出容器

完成所有操作后，可以使用以下命令退出容器终端：

exit

通过这些步骤，你可以找到并进入运行Nginx服务的容器，修改配置以解决client intended to send too large body错误。

9.3 完成修改

根据提示，执行docker ps 找到id，然后执行 docker exec -it id /bin/bash进入容器，再执行vim /etc/nginx/nginx.conf准备修改配置文件。

不出所料，继续报错： bash: vi: command not found

发chatgpt，给出了意见：如果容器中没有 vi，可以使用其他文本编辑器或工具来编辑配置文件。以下是一些替代方案：

使用 `nano` 编辑器

如果 nano 可用，可以使用以下命令：

nano /etc/nginx/nginx.conf

使用 `sed` 命令

如果没有任何文本编辑器，可以使用 sed 命令直接修改配置文件。例如，添加或修改 client_max_body_size 指令：

1. 添加 client_max_body_size 指令:

sed -i '/http {/a\    client_max_body_size 10M;' /etc/nginx/nginx.conf

上述命令会在 http { 块中添加 client_max_body_size 10M;。

1. 修改 client_max_body_size 指令: 如果 client_max_body_size 已存在，需要修改其值：

sed -i 's/client_max_body_size .*/client_max_body_size 10M;/' /etc/nginx/nginx.conf

9.4 安装文本编辑器

如果你有权限并且需要，可以在容器中安装 vi 或 nano。

安装 vi:

yum install -y vim

安装 nano:

yum install -y nano

使用重建镜像的方法如果你经常需要在容器中编辑文件，建议在Docker镜像中安装所需的工具。可以在 Dockerfile 中添加安装命令，并重新构建镜像。

FROM nginx:1.25.3
RUN apt-get update && apt-get install -y vim

然后重新构建和启动容器：

docker build -t my-nginx-image .
docker run -d --name my-nginx-container -p 80:80 my-nginx-image

通过上述方法，你可以编辑Nginx配置文件并解决 client intended to send too large body 错误。

总结

• 问题根源，排查服务器日志，得知client intended to send too large body，请求体过大
• 解决方法，修改nginx配置client_max_body_size 10M
• docker、vim等常见工具需要了解基础用法，至少到知道工具名字
• 除了搜索引擎，更推荐chatgpt，可访问chatgpt.com目前也不需要注册，支持GPT-4o和GTP-3.5

参考截图如下：

希望以上分享内容对你有所帮助，也欢迎留言讨论你在自动化测试过程中遇到的问题

天工造物局

北京人形旗下天工造物具身智能开源社区，聚焦具身天工与慧思开物两大平台

更多推荐

deck.gl TripsLayer 出租车轨迹动画示例实战：从示例运行到着色器原理

TripsLayer 是 deck.gl 中用于渲染**随时间流动的轨迹动画**（如出租车行程、物流路径、迁徙路线）的核心图层。本文以仓库中的最小独立示例 [examples/website/trips](https://link.gitcode.com/i/1442af8f442f4cff39ff546e050fceb5) 为骨架，带你完成从安装依赖、启动应用、理解曼哈顿出租车数据格式，到深入

天工造物局

Foundry Anvil 中 eth_simulateV1 的 Blob 交易与 Blob Gas 字段规范化：原理、实现与测试验证

本篇技术指南以 [anvil-simulate-blob-transactions.md](https://link.gitcode.com/i/3d2ebe227262de169335eb290af80da8) 这条 changelog 条目为起点，深入剖析 Foundry Anvil 对 `eth_simulateV1` RPC 返回结果中 blob（EIP-4844）交易与 blob gas

天工造物局

LMCache CLI 实战：用 `lmcache kvcache clear` 管理运行中服务的 KV Cache 状态

本文是一份针对 LMCache 官方 CLI 命令 `lmcache kvcache` 的完整技术指南。该命令用于在**运行中的 LMCache 服务（MP HTTP server）**上管理 KV cache 状态，当前提供 `clear` 子命令，用于清空 L1（CPU 内存）层中缓存的全部 KV 数据。读完本文，你将掌握该命令的完整参数体系、退出码语义、终端/JSON/静默三种输出模式，并能

天工造物局

所有评论(0)

查看更多评论

程序员的世界你不懂

@weixin_46281518

已为社区贡献10条内容

playwright Faker生成测试数据，Web测试目标与Playwright，利用AI解决登录问题

程序员的世界你不懂

1. 问题引入

1.1 真实场景

1.2 方法探索

2. Faker使用简介

2.1 快速上手

安装Faker库：

使用Faker生成随机数据：

中文支持

2.2 Faker其他功能

生成人员信息

生成地址信息

生成公司信息

2.3 Python版本

安装Faker库：

使用Faker生成随机数据：

小结

. Web测试的挑战

3.1 有关测试的抱怨

3.2 测试金字塔策略

4. 现代Web测试目标

5. 引入Playwright

5.1 工作原理介绍

5.2 对比Selenium和Cypress

小结论

借助chatpgt解决自动化登录失败问题

6. 问题描述

7. 初步排查

7.1 清除浏览器缓存和Cookies：

7.2 检查浏览器扩展：

7.3 更新浏览器：

7.4 检查DNS设置：

7.5 检查代理设置：

7.6 重置浏览器设置：

8. 深入排查

8.1 服务器日志分析

8.2 chatgpt回答

9. 问题解决

9.1 修改Nginx配置

打开Nginx配置文件:

增加或修改 client_max_body_size 指令:

保存并退出编辑器

检查配置文件语法:

重新加载Nginx配置:

验证更改

注意事项

9.2 修改docker配置

列出所有正在运行的容器

查找Nginx容器

进入Nginx容器

修改Nginx配置

保存并退出编辑器

重新加载Nginx配置

退出容器

9.3 完成修改

使用 nano 编辑器

使用 sed 命令

9.4 安装文本编辑器

总结

所有评论(0)

温馨提示：您尚未绑定手机号

程序员的世界你不懂

安装`Faker`库：

使用`Faker`生成随机数据：

2.2 `Faker`其他功能

2.3 `Python`版本

安装`Faker`库：

使用`Faker`生成随机数据：

. `Web`测试的挑战

4. 现代`Web`测试目标

5. 引入`Playwright`

增加或修改 `client_max_body_size` 指令:

重新加载`Nginx`配置:

9.2 修改`docker`配置

查找`Nginx`容器

进入`Nginx`容器

修改`Nginx`配置

重新加载`Nginx`配置

使用 `nano` 编辑器

使用 `sed` 命令