PlayWright VS Porsche实战 - 完坑

2023-03-03 14:45:46 浏览数 (1)

没想到果然是个神坑,但是考虑2022年的最后一天,不想把这个坑带到明年,于是填了吧。

原本以为可以写的很多,没想到后面也没遇到啥影响的难点,导致这东西就卡在这里了,这次收尾就说几个有趣的功能点吧。

1.首先是关于定位的一个扩展说明,如果定位地址不唯一,其实Playwright会给出错误提示,说明该对象有多少个重复对象,需要唯一只需要指定一下.nth()编号就好了,下面的代码就尝试获取了所有匹配该定位的文本,大家可以自己琢磨下怎么获取匹配这个定位的对象个数再遍历。

代码语言:javascript复制
            int i;
            for (i = 0; i <= 10; i  ) {
                System.out.println(page.locator("div.m-172__scroll-wrapper>div").nth(i).innerText());
            }
            System.out.println(price);

2.其次就是关于Browse、Context、Page之间的关系,当然可以扩展到Frame

代码语言:javascript复制
            Browser browser = playwright.chromium().launch(new BrowserType.LaunchOptions().setHeadless(false).setSlowMo(200));
            //Browser是浏览器,可以配置多个浏览器
            //BrowserContext是一个浏览器内所有对象的合集
            //Page是一个标签页
            BrowserContext context = browser.newContext();
            Page page = context.newPage();
            Page page2 = context.newPage();
            page.setViewportSize(1920, 1080);
            page2.setViewportSize(1920, 1080);
            page.navigate("https://www.porsche.cn/china/zh/");
            page2.navigate("http://www.baidu.com");

每个Browser都是一个具体的浏览器,浏览器下可以有一个Context的集合,该集合下是Page,多个Page可以独立操作,如果Page里面有Frame可以继续,直到最后的Locator。

3.关于Console日志的捕获

这里就直接用了官方帮助文档了,琢磨一下就可以捕获了

代码语言:javascript复制
// Listen for all System.out.printlns
page.onConsoleMessage(msg -> System.out.println(msg.text()));

// Listen for all console events and handle errors
page.onConsoleMessage(msg -> {
  if ("error".equals(msg.type()))
    System.out.println("Error text: "   msg.text());
});

// Get the next System.out.println
ConsoleMessage msg = page.waitForConsoleMessage(() -> {
  // Issue console.log inside the page
  page.evaluate("console.log('hello', 42, { foo: 'bar' });");
});

// Deconstruct console.log arguments
msg.args().get(0).jsonValue() // hello
msg.args().get(1).jsonValue() // 42

4.TraceView的测试报告

在PlayWright中如果说最有用的功能,可能这是其中之一,通过完整的捕获操作生成可视化的报告,方便定位每一步执行了什么,出错的原因是什么,提供了完整1:1历史回放功能。

代码语言:javascript复制
 @Test
    void playwright2()
    {
        try (Playwright playwright = Playwright.create()) {
            Browser browser = playwright.chromium().launch(new BrowserType.LaunchOptions().setHeadless(false).setSlowMo(200));
            //Browser是浏览器,可以配置多个浏览器
            //BrowserContext是一个浏览器内所有对象的合集
            //Page是一个标签页
            BrowserContext context = browser.newContext();
            context.tracing().start(new Tracing.StartOptions()
                    .setScreenshots(true)
                    .setSnapshots(true)
                    .setSources(true));
            Page page = context.newPage();
            Page page2 = context.newPage();
            page.setViewportSize(1920, 1080);
            page2.setViewportSize(1920, 1080);
            page.navigate("https://www.porsche.cn/china/zh/");
            page2.navigate("http://www.baidu.com");

            //多标签切换
            //a标签新增一个操作后要在b标签中操作这个记录,然后回到a标签
            context.tracing().stop(new Tracing.StopOptions().setPath(Paths.get("trace.zip")));

        }

注意必须要设置一个PLAYWRIGHT_JAVA_SRC的环境变量,在Mac中无需配置。而这个配置的内容其实并不影响最后文件存放的路径。

将文件通过命令启动或者访问官网的Playwright Trace Viewer

https://trace.playwright.dev/

将保存的Trace文件拖入即可

基本上大概的介绍就到这里吧,几乎所有的方案官方文档都给出了建议,在技术层面上也没什么特别的困难了,剩下的无非是如何针对自身提供完成一些逻辑的封装组合。

https://playwright.dev/

同样,最后喂B站

https://www.bilibili.com/video/BV1EG4y1m7og/

0 人点赞