When executing automated test cases, occasionally there will be some instability bug, which needs to be reproduced and restored, so it is necessary to track the execution process of the test case.
Playwright Trace Viewer is a GUItool, you can see the entire script running record, error code execution, logand screenshots, displayed in the style of the entire time bar.
How to record a trace
You can use BrowserContext.tracing()record tracking, let's look at this in detail API, we just need to call the following code after creating the context.
// 开始记录执行过程
context.tracing().start(new Tracing.StartOptions()
.setScreenshots(true)// 是否在跟踪过程中捕获屏幕截图。屏幕截图用于构建时间轴预览。
.setSnapshots(true));// 捕获每个动作的 DOM 快照，记录网络活动
trace.zipWe call the following code at the place where we want to end the tracking. By default, a file will be generated , and we will save it src/main/resourcesin the directory. Of course, this directory is up to you.
// 停止记录执行过程,脚本执行完成后将trace.zip保存到指定目录
context.tracing().stop(new Tracing.StopOptions()
.setPath(Paths.get("src/main/resources/trace.zip")));import com.microsoft.playwright.*;
import com.microsoft.playwright.options.*;
import java.nio.file.Paths;
import java.util.Arrays;
/**
* @author 作者:测试工程师成长之路
* @version 创建时间：2023/5/14
* 类说明:跟踪查看器
*/
public class TraceViewerTest {
public static void main(String[] args) {
try (Playwright playwright = Playwright.create()) {
Browser browser = playwright.chromium().launch(new BrowserType.LaunchOptions()
.setArgs(Arrays.asList("-start-maximized"))//浏览器最大化设置
.setChannel("chrome")
.setHeadless(false));
// 创建浏览器上下文并设置浏览器最大化
BrowserContext context = browser.newContext(new Browser.NewContextOptions().setViewportSize(null));
// 开始记录执行过程
context.tracing().start(new Tracing.StartOptions()
.setScreenshots(true)// 是否在跟踪过程中捕获屏幕截图。屏幕截图用于构建时间轴预览。
.setSnapshots(true));// 捕获每个动作的 DOM 快照，记录网络活动
//.setSources(true));
Page page = context.newPage();
page.navigate("https://www.baidu.com/");
page.locator("#kw").click();
page.locator("#kw").press("CapsLock");
page.locator("#kw").fill("Tester");
page.locator("#kw").press("CapsLock");
page.locator("#kw").fill("TesterRoad");
Thread.sleep(3000);
page.getByRole(AriaRole.BUTTON, new Page.GetByRoleOptions().setName("百度一下")).click();
Thread.sleep(3000);
Page page1 = page.waitForPopup(() -> {
page.getByRole(AriaRole.LINK, new Page.GetByRoleOptions().setName("常见接口管理平台简介 - 知乎")).click();
});
Thread.sleep(3000);
// 停止记录执行过程,脚本执行完成后将trace.zip保存到指定目录
context.tracing().stop(new Tracing.StopOptions()
.setPath(Paths.get("src/main/resources/trace.zip")));
} catch (InterruptedException e) {
e.printStackTrace();
}
}
}
How to open the trace viewer
we open in browser
https://trace.playwright.dev/. Click Select fileto upload trace.zipthe file.
How to view traces
When the file is uploaded trace.zip, it can be displayed, by clicking on each operation or hovering with the timeline to view the traces of the test, and see the state of the page before and after the operation. Check logs, sources, and network at each step of the test. Trace Viewer creates a DOM snapshot so it can be fully interacted with, opened devtools etc.
Finally: The complete software testing video learning tutorial below has been organized and uploaded, and friends who need it can get it by themselves [Guaranteed 100% free]
Software Testing Interview Documentation
We must study to find a high-paying job. The following interview questions are the latest interview materials from first-tier Internet companies such as Ali, Tencent, and Byte, and some Byte bosses have given authoritative answers. Finish this set The interview materials believe that everyone can find a satisfactory job.
Acquisition of complete set of information
