《刚刚问世》系列初窥篇-Java+Playwright自动化测试-34-JavaScript的调用执行-下篇 （详细教程）

北京_宏哥
69 阅读6分钟

1.简介

在实际工作中，我们需要对处理的元素进行高亮显示，或者有时候为了看清楚操作过程和步骤我们需要跟踪鼠标点击了哪些元素需要标记出来。虽然很少遇到，但是为了以后大家可以参考或者提供一种思路，今天宏哥就在这里把这种测试场景playwright是如何处理的讲解和分享一下。

JavaScript作为浏览器核心脚本语言，其重要性不仅体现在前端开发领域，更成为Web自动化测试工程师的必备工具。对于测试人员而言，深入钻研JS语法体系固然有益，但更高效的方式是聚焦测试场景中的高频脚本需求。本文精选自动化测试中可直接复用的JS代码片段，帮助测试工程师快速实现以下能力：

  1. ‌元素定位增强‌ - 突破基础定位器限制，处理动态ID、Shadow DOM等复杂场景
  2. ‌页面操作优化‌ - 实现滚动、焦点切换等浏览器原生API难以直接控制的操作
  3. ‌数据验证技巧‌ - 通过JS直接访问DOM结构、计算样式等深层属性
  4. ‌异常处理机制‌ - 创建自定义错误捕获和断言逻辑

这些经过实战验证的脚本模板，既能满足90%以上的自动化测试需求，又可作为深入学习JS的实践入口。正如业界共识：优秀工程师善于站在巨人肩膀上，但持续扩展技术边界才是保持竞争力的关键。

2.用法

前边的文章中就提到过，那里的学习和介绍是为这里做准备和打基础的，宏哥这里提取一下主要使用的语法，语法如下：

// 原生js
String  js = "原生js;"；
// 调用js
page.evaluate(js);

3.窗口滚动

作用：操作滚动条，滑动web页面。

String js = "window.scrollTo('x','y');";
//或者 
String js = "var q=document.documentElement.scrollTop=y;";
page.evaluate(js);

参数说明

x：滚动条向右移动的距离。

y：滚动条向下移动的距离。

4.移除属性

作用：可以删除元素的任何属性，主要用来移除时间控件的readonly属性。使其达到可以编辑的效果。

String js = "document.getElementById('Dateinput').removeAttribute('attribute');";
page.evaluate(js);

参数说明

attribute：元素的某个属性，比如readonly，value，name等。、

5.高亮元素

作用：方便用户查看当前操作的是哪个页面元素，也方便测试人员定位问题。

String js = "var u = document.getElementById('TANGRAM__PSP_11__password').style.background = 'green'";
page.evaluate(js);

6.点击元素

作用：由于web自动化的最大问题就是稳定性比较差，有些时候使用selenium无法点击元素，因此我们可以使用JS实现元素的点击操作。

String js = "var u = document.getElementById('TANGRAM__PSP_11__password').click();";
page.evaluate(js);

7.清除输入框内容

作用：用来清除输入框的内容。

String js = "var u = document.getElementById('TANGRAM__PSP_11__password').value ='' ;";
page.evaluate(js);

8.输入内容

作用：输入框中输入内容。

String js = "var u = document.getElementById('TANGRAM__PSP_11__password').value ='北京-宏哥' ;";
page.evaluate(js);

9.场景三

利用JS处理元素高亮显示。其实这个前边在代码中也有实现过，只不过没有提到可能没有注意或者看到过，宏哥在这里就讲解一下。

9.1测试用例

宏哥这里以度娘首页的登录为例，测试用例如下：

1.首页访问百度首页 2.点击【登录】按钮，弹出登录页面。 3.将用户名的输入框背景颜色加上黄色，输入框的线变成蓝色。 4.将密码的输入框背景颜色加上绿色。 5.将登录按钮的背景颜色加上红色。

9.2代码设计

image

9.3参考代码

package com.bjhg.playwright;

import com.microsoft.playwright.Browser;
import com.microsoft.playwright.BrowserContext;
import com.microsoft.playwright.BrowserType;
import com.microsoft.playwright.Page;
import com.microsoft.playwright.Playwright;

/**
 * @author 北京-宏哥
 * 
 * @公众号:北京宏哥（微信搜索，关注宏哥，提前解锁更多测试干货）
 * 
 * 《刚刚问世》系列初窥篇-Java+Playwright自动化测试-34-JavaScript的调用执行-下篇 （详细教程）
 *
 * 2025年08月20日
 */

public class Test_JS {

    public static void main(String[] args) {
        // TODO Auto-generated method stub
        try (Playwright playwright = Playwright.create()) {
            //1.使用chromium浏览器，# 浏览器配置，设置以GUI模式启动Chrome浏览器（要查看浏览器UI，在启动浏览器时传递 headless=false 标志。您还可以使用 slowMo 来减慢执行速度。
            Browser browser = playwright.chromium().launch(new BrowserType.LaunchOptions().setHeadless(false).setSlowMo(300));
            //2.创建context
            BrowserContext context = browser.newContext();
            //创建page
            Page page = context.newPage();
            //3.浏览器访问demo
            page.navigate("https://www.baidu.com/");
            Thread.sleep(300);
            //4.定位点击登录
            page.locator("#s-top-loginbtn").click();
            page.locator("#TANGRAM__PSP_11__userName").fill("北京-宏哥");
            //5. 设置颜色
            String usernamejs ="var u = document.getElementById('TANGRAM__PSP_11__userName').style.background = 'yellow'; var u1=document.getElementById('TANGRAM__PSP_11__userName').style.border = '2px solid blue';";
            page.evaluate(usernamejs);
            String passwordjs = "var u = document.getElementById('TANGRAM__PSP_11__password').style.background = 'green'";
            page.evaluate(passwordjs);
            String submitjs = "var u = document.getElementById('TANGRAM__PSP_11__submit').style.background = 'red'";
            page.evaluate(submitjs);
            System.out.println("Test Pass");
            Thread.sleep(800);
            //5.关闭page
            page.close();
            //6.关闭browser
            browser.close();
        } catch (InterruptedException e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        }

    }

}

9.4运行代码

1.运行代码，右键Run As->Java Application，就可以看到控制台输出，如下图所示：

image

2.运行代码后电脑端的浏览器的动作（开始看不到底部，最后操作后直接到底部）。如下图所示：

GIF+2025-8-18+13-38-35

10.场景五

因为滑动滚动条、移除属性和高亮宏哥都演示了，所以这个场景宏哥来演示清空输入内容、输入框输入内容和点击元素。这里用度娘搜索为例。

10.1测试用例

1.访问百度首页。 2.将搜索的输入框清空。 3.输入北京宏哥，点击百度一下按钮，查看搜索结果。

10.2代码设计

image

10.3参考代码

package com.bjhg.playwright;

import com.microsoft.playwright.Browser;
import com.microsoft.playwright.BrowserContext;
import com.microsoft.playwright.BrowserType;
import com.microsoft.playwright.Page;
import com.microsoft.playwright.Playwright;

/**
 * @author 北京-宏哥
 * 
 * @公众号:北京宏哥（微信搜索，关注宏哥，提前解锁更多测试干货）
 * 
 * 《刚刚问世》系列初窥篇-Java+Playwright自动化测试-34-JavaScript的调用执行-下篇 （详细教程）
 *
 * 2025年08月20日
 */

public class App {

    public static void main(String[] args) {
        // TODO Auto-generated method stub
        try (Playwright playwright = Playwright.create()) {
            //1.使用chromium浏览器，# 浏览器配置，设置以GUI模式启动Chrome浏览器（要查看浏览器UI，在启动浏览器时传递 headless=false 标志。您还可以使用 slowMo 来减慢执行速度。
            Browser browser = playwright.chromium().launch(new BrowserType.LaunchOptions().setHeadless(false).setSlowMo(300));
            //2.创建context
            BrowserContext context = browser.newContext();
            //创建page
            Page page = context.newPage();
            //3.浏览器访问demo
            page.navigate("https://www.baidu.com/");
            Thread.sleep(300);
            //4.js操作输入框清空
            String js1 = "var u = document.getElementById('chat-textarea').value ='';";
            page.evaluate(js1);
            //5.js操作输入框输入北京宏哥
            String js2 = "var u = document.getElementById('chat-textarea').value ='北京-宏哥' ;";
            page.evaluate(js2);
            //6.js点击按钮
            String js3 = "var u = document.getElementById('chat-submit-button').click() ;";
            page.evaluate(js3);
            System.out.println("Test Pass");
            Thread.sleep(5000);
            //5.关闭page
            page.close();
            //6.关闭browser
            browser.close();
        } catch (InterruptedException e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        }

    }
}

10.4运行代码

1.运行代码，右键Run As->Java Application，就可以看到控制台输出，如下图所示：

image

2.运行代码后电脑端的浏览器的动作（开始看不到底部，最后操作后直接到底部）。如下图所示：

GIF+2025-8-18+16-37-37

11.小结

以上所有的JS操作，还可以结合playwright中的WebElement按照以下方式实现，因为JS中查找元素的方法有限，比如xpath定位，在js中不存在。 Js相对于selenium的控制页面元素，执行速度更快，而且当遇到playwright比较难处理的操纵时，可以考虑使用js代码来实现，当然还是需要你懂点Js代码，不懂也没关系，掌握以上代码完全够你解决实际问题。

好了，今天时间也不早了，宏哥就讲解和分享到这里，感谢大家耐心的阅读！喜欢宏哥的别忘记支持一下哈！！！

avatar
文章
阅读
粉丝