系列初窥篇-Java+Playwright自动化测试-31- 操作日历时间控件-上篇（详细教程）

3.1代码设计

根据第一种思路进行代码设计如下图所示：

 

image

 

3.2参考代码

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自动化测试-31- 操作日历时间控件-上篇

 *

 * 2025年08月04日

 */

 

public class Test_calendar {

 

    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("http://jqueryui.com/resources/demos/datepicker/default.html");

            Thread.sleep(100);

            //4.定位日历的输入框，并输入国庆节：2025-10-01

            page.locator("#datepicker").fill("2025-10-01");

            System.out.println("Test Pass");

            //5.关闭page

            page.close();

            //6.关闭browser

            browser.close();

        } catch (InterruptedException e) {

            // TODO Auto-generated catch block

            e.printStackTrace();

        }

    }

}

3.3运行代码

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

image

 

2.运行代码后电脑端的浏览器的动作（日期控件的输入框直接输入国庆节，看不清的小伙伴或者童鞋们可以自己在关闭浏览器前加一个等待即可）。如下图所示：

GIF+2025-7-31+15-38-05

 

4.方法二

第二种方法：一种笨办法，通过元素定位，采用编写的Java脚本模拟手工操作一样，将日期一步一步选择点击出来。

 

4.1代码设计

根据第二种思路进行代码设计如下图所示：

 

image

 

4.2参考代码

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自动化测试-31- 操作日历时间控件-上篇

 *

 * 2025年08月04日

 */

 

public class Test_calendar {

 

    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(500));

            //2.创建context

            BrowserContext context = browser.newContext();

            //创建page

            Page page = context.newPage();

            //3.浏览器访问demo

            page.navigate("http://jqueryui.com/resources/demos/datepicker/default.html");

            Thread.sleep(100);

            //4.定位日历的并点击输入框，

            page.locator("#datepicker").click();

            //点击下一个月8月,因为宏哥是7月份写的，所有需要点击到10月份

            page.locator("//*[@id='ui-datepicker-div']/div/a[@data-handler='next']").click();    

            //点击下一个月9月

            page.locator("//*[@id='ui-datepicker-div']/div/a[@data-handler='next']").click();

            //点击下一个月10月

            page.locator("//*[@id='ui-datepicker-div']/div/a[@data-handler='next']").click();

            //xpath定义第二行第六个元素，可能每个月排序不一样，所以不一定点击的就是01日（2025-10-01）

            page.locator("//*[@id='ui-datepicker-div']/table/tbody/tr[1]/td[4]/a").click();

            System.out.println("Test Pass");

            //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，就可以看到控制台输出，如下图所示：

image

 

2.运行代码后电脑端的浏览器的动作（日期控件的输入框直接输入国庆节）。如下图所示：

GIF+2025-7-31+15-57-31

 

5.小结

日历控件的自动化测试操作今天就先介绍讲解到这里，比较简单易懂。希望对您有所帮助或者参考。好了，今天时间不早了，灰常感谢您耐心地阅读！！！