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

1.简介

在日常的工作中，我们有时候在做web自动化时，有些情况单靠playwright的API根本无法完成以及无法应对，或者处理起来非常吃力费劲，有时候反倒是费力不讨好，因此我们需要通过或者借助第三方手段，如：js脚本来完成实现，例如：去改变某些元素对象的属性或者进行一些特殊的操作，本文宏哥将要讲解和分享playwright怎样来调用JavaScript脚本完成特殊操作。

2.用法

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

Java 复制代码

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

3.项目实战

宏哥这里列举日常工作中经常遇到的两种测试场景。第一种场景：日历控件的输入框中包含readonly属性，不允许用户编辑输入日期。第二种场景：页面的懒加载模式，有些页面的内容不是打开页面时直接加载的，需要我们滚动页面，直到页面的位置显示在屏幕上时，才会去请求服务器，加载相关的内容，这样做的好处是可以节省流量和服务器资源。所以有时候我们就需要模拟页面向下滚动的操作，然后页面加载完成，然后再对元素进行处理和操作。

3.1场景一

第一种场景：日历控件的输入框中包含readonly属性，不允许用户编辑输入日期。

1.日历时间控件限制手动输入的情况下， fill() 无法写入数据，需要执行js来移除readonly属性！然后再次写入日期，或者是直接通过js来写入日期。

详细参考博客：日历时间控件（传送门）

3.2场景二

第二种场景：页面的懒加载模式，有些页面的内容不是打开页面时直接加载的，需要我们滚动页面，直到页面的位置显示在屏幕上时，才会去请求服务器，加载相关的内容，这样做的好处是可以节省流量和服务器资源。所以有时候我们就需要模拟页面向下滚动的操作，然后页面加载完成，然后再对元素进行处理和操作。

1.有些页面的内容不是打开页面时直接加载的，需要我们滚动页面，直到页面的位置显示在屏幕上时，才会去请求服务器，加载相关的内容。所以，有时候我们就需要模拟页面向下滚动的操作。而python没有提供操作滚动条的方法，只能借助js来完成！

2.使用JS语句模拟向下滚动页面

可以使用JS语句，定位滚动条的位置到最下面，从而实现页面的向下滚动。

语法如下：

Java 复制代码

String js = "var q=document.documentElement.scrollTop=滚动条的位置;";
page.evaluate(js);

4.实际案例（场景二）

宏哥在这里直接就用博客园的滚动条给小伙伴或者是童鞋们来实战演示一下，大家可以注意宏哥录制浏览器动作视频的滚动条在向下滚动直到博客园的底部。

4.1代码设计

4.2参考代码

Java 复制代码

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自动化测试-33-JavaScript的调用执行-上篇 （详细教程）
 *
 * 2025年08月11日
 */

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.cnblogs.com/");
            Thread.sleep(300);
            //4.js操作滚动条
            String js = "var q=document.documentElement.scrollTop=50000;";
            page.evaluate(js);
            System.out.println("Test Pass");
            Thread.sleep(500);
            //5.关闭page
            page.close();
            //6.关闭browser
            browser.close();
        } catch (InterruptedException e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        }

    }

}

4.3运行代码

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

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

5.小结

5.1知识拓展

1.获取浏览器滚动条滚动距离的问题，共有两种方法，

JavaScript 复制代码

document.body.scrolltop//当没有DOCTYPE声明时，用它
document.documentElement.scrollTop//标准网页，用它

2.也有人说chrome只能使用document.body.scrollTop方法得到height值，本人试用了一下，得到的结果是

以此可见，Chrome依然遵循上面的标准，使用document.documentElement.scrollTop方式，得到height值

其实在实际使用中，为确保在各个浏览器中的正常使用，js代码可采用如下方法：

JavaScript 复制代码

var height = document.body.scrolltop||document.documentelement.scrolltop

因为这二者只有一个值有效，因此保证了在各种情况下都能获取浏览器滚动条滚动的距离。当然了，我们也可以事先在控制台上试一下，或者是一个获取不到就是用另一个方法（二选一即可）。

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

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

1.简介

2.用法

3.项目实战

3.1场景一

3.2场景二

4.实际案例（场景二）

4.1代码设计

4.2参考代码

4.3运行代码

5.小结

5.1知识拓展

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