【原】Playwright系列：第14章 Playwright性能测试实战

功能测试可以验证应用程序的功能是否正常,而性能测试关注程序在执行功能测试的同时,资源和服务的性能表现是否达标。

对于网页应用,主要的性能指标包括:

- 页面加载时间:首页或关键路径页面加载完成的时间。

- 资源加载时间:CSS、JS、图片等静态资源加载完成的时间。

- FPS和帧时间:用于衡量网页动画流畅度的指标。

- CPU和内存占用:反映网页实际运行时占用的系统资源。

- 请求数和转发时间:衡量服务端性能的指标。

Playwright不仅用于功能测试,也是一款强大的网页性能测试工具。它通过性能测量API和与Lighthouse的整合,提供全方位的网页性能测试解决方案。

本章我们将学习如何使用Playwright进行网页性能测试,掌握性能指标的测量方法和如何分析测试报告进行性能优化。

Playwright性能测试API

Playwright提供以下主要API用于性能测试:

- page.metrics():获取页面加载及性能相关指标。

- page.evaluate(cb):在页面环境执行自定义Javascript代码,用于采集自定义性能指标。

- page.tracing.start():开始performance跟踪,用于获取FPS、帧时间和内存占用数据。

- page.evaluateHandle('Lighthouse.createReport()'):生成Lighthouse性能审计报告。

示例:

# 获取页面指标  metrics = page.metrics()
# 自定义采集前端性能指标time_to_interactive = page.evaluate('window.performance.timing.domInteractive')
# 开始跟踪FPS和内存  page.tracing.start()  # 滚动页面后结束跟踪page.tracing.stop()trace = page.tracing.trace()
# 生成Lighthouse报告lh_report = page.evaluateHandle('Lighthouse.createReport()')

Playwright性能测试步骤

1. 确定测试场景和性能指标

根据产品需求和用户痛点,确定关键用户场景和需要测量的性能指标,如首页time_to_interactive指标等。

2. 编写测试脚本采集指标 

使用Playwright性能测试API编写测试脚本,在关键场景下采集对应的性能指标。

3. 运行测试并获取性能数据

运行测试脚本,Playwright自动获取页面加载指标和资源指标。对于FPS、帧时间和内存指标,需要在测试中手动添加page.tracing.start()和page.tracing.stop()进行跟踪。

4. 分析Lighthouse报告找到性能瓶颈 

使用evaluateHandle方法生成Lighthouse性能审计报告,报告中的各项得分和建议可以帮助找到性能优化方向。

5. 优化性能bottleneck并重新测试

根据报告建议,对bottleneck进行优化,如启用文本压缩、移除未使用资源、优化CSS和JS等。然后重新运行测试进行验证。

6. 导入数据并监控性能指标 

将测试收集到的性能数据导入外部系统进行监控,定期运行性能测试并与历史数据对比监控网页性能。

使用Lighthouse分析性能报告

Lighthouse是一个用于性能审计和优化的开源工具。Playwright与Lighthouse进行深度整合,可以通过page.evaluateHandle()方法直接在Playwright测试中生成Lighthouse报告。

报告包含页面的性能得分及针对得分较低项的优化建议。主要包含六大类:

- 速度:衡量页面加载性能,以及资源优化情况。

- PWA:渐进式网络应用指标,包含installable manifest等。

- 可访问性:页面对残障人士等的友好程度。

- 最佳做法:像SEO、HTTPS或Viewport等最佳实践的遵循情况。 

- SEO:搜索引擎优化相关指标,如meta描述存在与否。

- 进步空间:Lighthouse对相关改进和优化的建议。

通过分析报告中的各项得分和优化建议,可以快速定位影响页面性能的关键bottleneck,并进行修复与优化。这是一个非常有效的性能测试及优化方法。总结性能测试是产品开发及测试过程中不可或缺的一部分。本章学习了如何使用Playwright进行性能测试,通过性能指标的收集与分析,找到性能优化方向并验证优化效果。

Playwright不仅提供丰富的性能测试API,其与Lighthouse的深度整合更是大大简化了性能测试流程。开发者可以轻松生成详尽的性能报告并据此进行针对性优化。这套将功能测试、性能测试和优化有机结合的解决方案,让Playwright成为市面上测试工具中性能测试能力最强的工具之一。

希望通过本章的学习,不仅掌握如何进行性能测试,也对性能优化和提升有初步认知。性能优化是一个持续的过程,需要不断测试、分析和优化。借助Playwright,可以更高效地进行性能增强,打造高性能的Web应用。