《最新出炉》系列初窥篇-Python+Playwright自动化测试-30-处理日历时间控件-下篇 - 服务器托管|北京服务器租用|机房托管租用|IDC托管租用|机房机柜带宽租用-价格及费用咨询

1.简介

　　理想很丰满现实很骨感，在应用playwright实现web自动化时，经常会遇到处理日期控件点击问题，手工很简单，可以一个个点击日期控件选择需要的日期，但自动化执行过程中，完全复制手工这样的操作就有点难了或者是有些复杂啰嗦而且麻烦不过相对于selenium来说，playwright已经很好了。宏哥上一篇已经讲解了如何处理日历时间控件，但是有些网站不知道出于什么原因，对于第一种方法可能会遇到输入框是readonly的情况，禁止输入文本。那么第一种方法就不适用了，但是只要我们换个思路然后稍微的变通地处理一下，就又可以使用了。

2.问题

宏哥第一种方法地思路就是把它当做输入框，直接输入日期即可，想法是很美好的，但是有时候实行起来却不执行，这个时候我们就要仔细去看看前端的代码了，代码如下：

从上边的代码可以看出属性readonly人家根本不允许你输入，你就行不通了。

3.想法

既然这样了，我们就稍微变通一下，不要一条道走到黑。这个时候我们可以移除readonly的属性，问题就轻轻松松解决了，代码如下：

# 原生js，移除元素的readonly属性
js1 = 'document.getElementById("createTime").removeAttribute("readonly");'
page.evaluate(js1)
# 直接给输入框输入日期
js2 = 'document.getElementById("createTime").value="2023-11-11";'
page.evaluate(js2)

4.项目实战

网上找了半天也没有找到这样的例子，以前12306的日历是这种。最近升级了，已经不是这种了。不找了索性宏哥自己在本地做一个这样的小demo给小伙伴或者童鞋们来演示一下。

4.1代码准备

4.1.1前端HTML代码

前端HTML代码如下：

4.1.2CSS样式

HTML滑块CSS样式代码如下：

* {
    margin: 0;
    padding: 0;
}

body {
    font-size: 13px;
}

.calendar {
    width: 330px;
}

.calendar .title {
    position: relative;
    width: 100%;
    height: 30px;
    line-height: 30px;
    background: #17a4eb;
}

.title div {
    position: absolute;
}

.prev {
    left: 10px;
}

.now {
    left: 40%;
}

.next {
    right: 10px;
}

input {
    height: 30px;
    width: 326px;
}

table {
    width: 100%;
    border-collapse: collapse;
}

table th {
    border: 1px solid #ccc;
}

table td {
    text-align: center;
    border: 1px solid #ccc;
}

.red {
    background-color: #a1cbdb;
}

.blue {
    background-color: #e4e3e3;
}

.button1 {
    background-color: #f44336;
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 28px;
    margin-bottom: 100px;
    text-decoration: none;
    color: white;
}

#myAnchor {
    text-decoration: none;
    color: white;
}

4.1.3日历JS

日历JS代码如下：

window.onload = function () {
    //获取日期 输入框
    var oInput = document.getElementById('Dateinput');
    //获取日历
    var oCalender = document.getElementById('calender');
    //获取当前日期
    var oDate = new Date();
    //获取当年 年
    var year = oDate.getFullYear();
    //获取当前 月
    var month = oDate.getMonth() + 1;

    //日历框不能重复创建
    var flag = false;
    //日期输入框 获取焦点时 加载日历
    oInput.onfocus = function () {
        showDate(year, month);
    }

    //显示日历
    function showDate(year, month) {
        if (false == flag) {
            //1.日历标题
            var oTitle = document.createElement('div');
            oTitle.className = 'title';

            //1.1日历标题文本
            var prevM = 0;
            var nextM = 0;

            prevM = month - 1;
            nextM = month + 1;

            //当月份为1时 上一个月为12
            if (month == 1) {
                prevM = 12;
            }//当月份为12时 下一个月为1
            else if (month == 12) {
                nextM = 1;
            }

            var titleHtml = "";
            titleHtml += '
';
            titleHtml += prevM + '月';
            titleHtml += '';
            titleHtml += '';
            titleHtml += year;
            titleHtml += '年';
            titleHtml += '' + month;
            titleHtml += '月';
            titleHtml += '
';
            titleHtml += nextM + '月';

            oTitle.innerHTML = titleHtml;
            //将日历标题 拼接到日历
            oCalender.appendChild(oTitle);

            //1.2获取日历 表头元素（以便添加事件）
            var oSpans = oCalender.getElementsByTagName('span');
            var prevMonth = oSpans[0];
            var nextMonth = oSpans[3];
            var nowMonth = oSpans[2];
            var nowYear = oSpans[1];

            //2.创建星期 表头
            var otable = document.createElement('table');
            var othead = document.createElement('thead');
            var otr = document.createElement('tr');

            //2.1表头内容填充
            var arr = ['日', '一', '二', '三', '四', '五', '六'];
            for (var i = 0; i

5.自动化代码实现

5.1代码设计

5.2参考代码

# coding=utf-8

# 1.先设置编码，utf-8可支持中英文，如上，一般放在第一行

# 2.注释：包括记录创建时间，创建人，项目名称。
'''
Created on 2023-10-27
@author: 北京-宏哥   QQ交流群：705269076
公众号：北京宏哥
Project: 《最新出炉》系列初窥篇-Python+Playwright自动化测试-29-处理日历时间控件-下篇
'''

# 3.导入模块
from playwright.sync_api import Playwright, sync_playwright, expect
def run(playwright: Playwright) -> None:
    browser = playwright.chromium.launch(headless=False)
    context = browser.new_context()
    page = context.new_page()
    page.goto("C:/Users/DELL/Desktop/test/Calendar/Calendar.html")
    page.wait_for_timeout(3000)
    # 原生js，移除元素的readonly属性
    js1 = 'document.getElementById("Dateinput").removeAttribute("readonly");'
    page.evaluate(js1)
    # 直接给输入框输入日期
    js2 = 'document.getElementById("Dateinput").value="2023-11-11";'
    page.evaluate(js2)
    page.wait_for_timeout(2000)
    context.close()
    browser.close()
with sync_playwright() as playwright:
    run(playwright)

5.3运行代码

1服务器托管网.运行代码，右键Run’Test’，控制台输出，如下图所示：

2.运行代码后电脑端的浏览器的动作（成功将23年的光棍节输入进去了）服务器托管网。如下图所示：

6.小结

好了，时间不早了，今天就分享到这里，感谢大家耐心的阅读，这一篇内容其实是为后边文章的JavaScript的调用做一下铺垫和入门。

服务器托管，北京服务器托管，服务器租用 http://www.fwqtg.net
机房租用，北京机房租用，IDC机房托管， http://www.fwqtg.net

相关推荐: Python技术文章：深入理解collections模块

collections模块是Python的内建模块之一，它实现了特殊的容器数据类型，提供了Python内建的数据类型dict、list、set、和tuple的高效替代选择。一、namedtuple namedtuple() 函数是一个工厂函数，它返回一个子类…