测试开发 | 相比 Selenium,Web 自动化测试框架 Playwright 有哪些强大的优势?

Playwright 是由微软的研发团队所开发的一款 Web 自动化测试框架,这个框架具有多平台、跨语言的特点。除了基本的自动化测试能力之外,同时它还具备非常强大的录制功能、追踪功能。以下是 Playwright 与 Selenium 的对比。

由此可见,Playwright 不仅具备 Selenium 多语言、跨平台、多浏览器的优点。相较于 Selenium,Playwright 还有更加强大的优势。

Playwright 有哪些优点
  • 支持所有流行的浏览器。

  • 速度更快,更可靠的执行。

  • 更强大的自动化测试配置。

  • 强大的工具库:

    • Codegen:通过记录你的操作来生成测试。 将它们保存为任何语言。

    • Playwright inspector: 检查页面、生成选择器、逐步执行测试、查看点击点、探索执行日志。

    • Trace Viewer:捕获所有信息以调查测试失败,Playwright 跟踪包含测试执行截屏、实时 DOM 快照、动作资源管理器、测试源等等。

环境安装

Python 版本

  1. 安装 playwright 插件:pip install pytest-playwright

  2. 安装所需的浏览器:playwright install

Java 版本

  1. 在 pom.xml 中添加依赖。

 
  1. <!-- playwright依赖 -->

  2. <dependency>

  3. <groupId>com.microsoft.playwright</groupId>

  4. <artifactId>playwright</artifactId>

  5. <version>1.29.0</version>

  6. </dependency>

  7. <!-- maven编译使用的插件 -->

  8. <plugin>

  9. <groupId>org.apache.maven.plugins</groupId>

  10. <artifactId>maven-compiler-plugin</artifactId>

  11. <version>3.10.1</version>

  12. </plugin>

  1. 创建一个项目

 
  1. import com.microsoft.playwright.*;

  2. import java.nio.file.Paths;

  3. public class App {

  4. public static void main(String[] args) {

  5. try (Playwright playwright = Playwright.create()) {

  6. Browser browser = playwright.webkit().launch();

  7. Page page = browser.newPage();

  8. page.navigate("http://whatsmyuseragent.org/");

  9. page.screenshot(new Page.ScreenshotOptions().setPath(Paths.get("example.png")));

  10. }

  11. }

  12. }

  1. 编译并执行(注意:第一次编译执行的时候需要下载对应的依赖,耗时比较久。)

mvn compile exec:java -Dexec.mainClass="包名.文件名"
Codegen 录制功能

Codegen 在启动录制的时候,可以针对于不同的场景,设定不同的参数。比如设置一个特殊的窗口分辨率、颜色主题、指定手机设备等操作。

设定展示窗口大小

通过命令的--viewport-size参数可以指定录制时窗口展示的尺寸。用来测试当指定一个特殊的窗口展示尺寸时,界面显示是否还正常。​

  • Python 版本命令:

  1. # 设定展示窗口大小

  2. playwright codegen --viewport-size=800,600 地址

  • Java 版本命令:

  1. # 设定展示窗口大小

  2. mvn exec:java -e -Dexec.mainClass=com.microsoft.playwright.CLI -Dexec.args="codegen --viewport-size=800,600 地址"

指定设备

通过命令的--device参数可以指定录制时手机的设备型号。用来测试在使用手机浏览时,界面展示是否正常。

  • Python 版本命令:

  1. # 指定设备

  2. playwright codegen --device="iPhone 11" 地址

  • Java 版本命令:

  1. # 指定设备

  2. mvn exec:java -e -Dexec.mainClass=com.microsoft.playwright.CLI -Dexec.args='codegen --device="iPhone 11" 地址'

解决登录认证问题

通过参数--save-storage可以将认证信息保存在一个文件中。在执行命令后,会自动启动窗口,登录账号之后,手动关闭窗口。即可将认证信息保存下来:

然后通过--load-storage参数,可以再次启动浏览器,进入上次登录后的网站,发现已经登录成功:

  • Python 版本完整命令:

  1. # 保存登录状态

  2. playwright codegen --save-storage=auth.json

  3. # 加载认证信息

  4. playwright codegen --load-storage=auth.json 地址

  • Java 版本完整命令:

  1. # 保存登录状态

  2. mvn exec:java -e -Dexec.mainClass=com.microsoft.playwright.CLI -Dexec.args="codegen --save-storage=auth.json"

  3. # 加载认证信息

  4. mvn exec:java -e -Dexec.mainClass=com.microsoft.playwright.CLI -Dexec.args="codegen --load-storage=auth.json github.com/microsoft/playwright"

编写测试用例

以下为测试人论坛搜索功能的测试步骤,请使用 Playwright 自动化测试代码实现:

  1. 打开测试人论坛https://ceshiren.com/。

  2. 点击搜索按钮。

  3. 输入搜索信息,按下回车键。

  4. 查看搜索的结果是否包含搜索的信息。

  • Python 版本的实现

  1. from playwright.sync_api import sync_playwright, expect

  2. def test_playwright():

  3. # 实例化playwright

  4. playwright = sync_playwright().start()

  5. # 打开chrome浏览器,headless默认是True,无头模式,这里设置为False方便查看效果

  6. browser = playwright.chromium.launch(headless=False)

  7. # 打开一个窗口页面

  8. page = browser.new_page()

  9. # 在当前窗口页面打开测试人网站

  10. page.goto("https://ceshiren.com/")

  11. # 定位搜索按钮并点击

  12. page.locator("#search-button").click()

  13. # 定位搜索框并输入web自动化

  14. page.locator("#search-term").fill("web自动化")

  15. # 使用keyboard.down模拟键盘的enter事件

  16. page.keyboard.down("Enter")

  17. # 断言搜索结果

  18. result = page.locator(".list>li:nth-child(1) .topic-title>span")

  19. expect(result).to_contain_text("自动化测试")

  20. # 截图

  21. page.screenshot(path='screenshot.png')

  22. # 用例完成后先关闭浏览器

  23. browser.close()

  24. # 然后关闭playwright服务

  25. playwright.stop()

  • Java 版本的实现

  1. import com.microsoft.playwright.*;

  2. import org.junit.jupiter.api.BeforeAll;

  3. import org.junit.jupiter.api.Test;

  4. import java.nio.file.Paths;

  5. import static com.microsoft.playwright.Playwright.create;

  6. import static org.junit.jupiter.api.Assertions.assertEquals;

  7. import static org.junit.jupiter.api.Assertions.assertTrue;

  8. public class PlaywrightTest {

  9. public static Playwright playwright;

  10. @BeforeAll

  11. static void setupClass(){

  12. playwright = create();

  13. }

  14. @Test

  15. void playwrightDemo() {

  16. // 初始化一个浏览器实例

  17. Browser browser = playwright.chromium().launch(new BrowserType.LaunchOptions().setHeadless(false));

  18. // 初始化一个page实例

  19. Page page = browser.newPage();

  20. // 打开 ceshiren 页面

  21. page.navigate("https://ceshiren.com/");

  22. // 点击搜索按钮

  23. page.locator("#search-button").click();

  24. // 输入搜索信息

  25. page.locator("#search-term").fill("Appium");

  26. // 按下回车按钮

  27. page.keyboard().down("Enter");

  28. // 获取搜索结果的第一条

  29. Locator result = page.locator(".results .item:nth-child(1) .topic-title");

  30. // 断言搜索结果是否包含关键字

  31. assertTrue(result.innerText().contains("Appium"));

  32. }

  33. }

Trace Viewer 追踪功能

在做自动化测试过程中,常常会碰到的一个痛点问题:自动化测试明明发现了代码的 BUG,但是复现比较困难,研发又不认账。

碰到这种场景,Playwright 的 Trace 功能可以完美的解决。因为一旦设定了 Trace,代码执行过程中的每一个步骤,都有详细的截图,日志,时长的信息,比起功能测试的过程记录信息还要更加全面。

而且 Trace 的使用也非常简单,整体来说只需要两个步骤:

  1. 在代码中添加 Trace 配置。

  2. 打开 trace 记录文件,查看 trace 记录。

在代码中添加配置主要注意以下几点:

  1. 通过 browser 实例生成一个 context 实例

  2. 通过 context 实例的 tracing 配置启动参数

  3. 通过 context 实例生成 page 实例对象。并且想要 trace 的操作,必须都使用这个 page 实例对象

  4. 在想要结束追踪的地方,添加 tracing 的结束配置。

  • Python 版本实现

  1. from playwright.sync_api import sync_playwright, expect

  2. def test_ceshiren():

  3. # 实例化一个playwright对象

  4. playwright = sync_playwright().start()

  5. # 启动谷歌浏览器,模式使用无头模式

  6. browser = playwright.chromium.launch(headless=False)

  7. # =========== trace 的配置

  8. # 1. 生成 一个 context 实例

  9. context = browser.new_context()

  10. # 2. 添加 trace 的配置信息

  11. context.tracing.start(screenshots=True, snapshots=True, sources=True)

  12. # 3. 使用填加了trace 配置的 context 实例,去实例化一个page对象

  13. page = context.new_page()

  14. # 跳转到ceshiren页面

  15. page.goto("https://ceshiren.com/")

  16. # 点击搜索按钮, 输入css定位

  17. page.locator("#search-button").click()

  18. # 输入搜索的内容, 输入css定位

  19. page.locator("#search-term").fill("Appium")

  20. # 按下回车键

  21. page.keyboard.down("Enter")

  22. # time.sleep(3)

  23. result = page.locator(".results .item:nth-child(1) .topic-title")

  24. expect(result).to_contain_text("Appium")

  25. # 4. 在关闭浏览器之前,一定要结束trace

  26. context.tracing.stop(path="ceshiren.zip")

  27. browser.close()

  • Java 版本实现

注意:Java 版本需要配置临时环境变量PLAYWRIGHT_JAVA_SRC=src/test/java

  1. import com.microsoft.playwright.*;

  2. import org.junit.jupiter.api.BeforeAll;

  3. import org.junit.jupiter.api.Test;

  4. import java.nio.file.Paths;

  5. import static org.junit.jupiter.api.Assertions.assertTrue;

  6. // 直接调用 trace 报错,报错原因是 trace 需要设置 PLAYWRIGHT_JAVA_SRC 一个环境变量

  7. // com.microsoft.playwright.PlaywrightException: Source root directory must be specified via PLAYWRIGHT_JAVA_SRC environment variable when source collection is enabled

  8. // 解决方案: 设置 PLAYWRIGHT_JAVA_SRC=src/test/java

  9. public class PlaywrightTraceTest {

  10. public static Playwright playwright;

  11. @BeforeAll

  12. static void setupClass(){

  13. playwright = Playwright.create();

  14. }

  15. @Test

  16. void ceshiren(){

  17. // 默认是使用无头模式,添加 false 的配置

  18. Browser browser = playwright.chromium().launch(new BrowserType.LaunchOptions().setHeadless(false));

  19. BrowserContext context = browser.newContext();

  20. // 添加trace 的配置

  21. // 添加trace配置

  22. context.tracing().start(new Tracing.StartOptions()

  23. .setScreenshots(true)

  24. .setSnapshots(true)

  25. .setSources(true));

  26. Page page = context.newPage();

  27. // Page page = browser.newPage();

  28. page.navigate("https://ceshiren.com/");

  29. // 使用css定位

  30. // 点击搜索框

  31. page.locator("#search-button").click();

  32. // 输入搜索内容

  33. page.locator("#search-term").fill("Appium");

  34. // 按下回车键

  35. page.keyboard().down("Enter");

  36. // 找到第一个标题

  37. String res = page.locator(".results .item:nth-child(1) .topic-title").innerText();

  38. // System.out.println(res);

  39. page.screenshot(new Page.ScreenshotOptions()

  40. .setPath(Paths.get("ceshiren.png")));

  41. // 在测试用例执行完成之后,结束追踪

  42. context.tracing().stop(new Tracing.StopOptions()

  43. .setPath(Paths.get("ceshiren.zip")));

  44. // 断言找到的标题里面包含Appium关键字

  45. assertTrue(res.contains("Appium"));

  46. }

  47. }

在执行完成之后,查看项目根目录是否有生成对应的追踪文件夹。如果正常生成,即可使用以下命令查看 trace 的结果。

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

最后感谢每一个认真阅读我文章的人,礼尚往来总是要有的,虽然不是什么很值钱的东西,如果你用得到的话可以直接拿走:

这些资料,对于【软件测试】的朋友来说应该是最全面最完整的备战仓库,这个仓库也陪伴上万个测试工程师们走过最艰难的路程,希望也能帮助到你!

上一篇:opencv动态识别人脸


下一篇:WPS的JS宏如何设置Word文档的表格的单元格文字重新编号