如何解决日期选择器选择指定日期的问题_机器人流程自动化-阿里云帮助中心

案例介绍

在一些网页自动化的场景中，需要在网页页面中选择日期，然而有的页面没有提供输入日期的方式，只能通过鼠标点击的方式指定日期。在这些页面中，通过控件捕捉编写自动化流程，逻辑上会比较复杂，导致流程冗长，不便于后期维护，因此可以通过在网页中执行JS脚本的方式实现日期选择。本案例主要以百度日历这个场景为例。

案例实现

编码模式

编码模式通过js组件实现在日历选择器中选择指定的日期

from rpa.core import *
from rpa.utils import *
import rpa4 as rpa # 使用V4引擎

def start1():
    # 在此处开始编写您的应用
    # 设置指定日期
    date = '2022-9-22'
    # js脚本
    js_code = """
    function data(params){
    var years = params.split('-')[0]
    var month = params.split('-')[1]
    var day = params.split('-')[2]
    
    var date_doc = document.getElementsByClassName('calendar-box_O-50y')[0].getElementsByClassName('header-box_2Xp1u')[0];
    //操作选择指定年份
    setTimeout(function(){
       console.log('开始选年份');
        year = date_doc.getElementsByClassName('header-block-1_35BAr')[0].getElementsByTagName('div')[0].getElementsByTagName('span')[0].innerText.split('年')[0];
        if(year != years){
            date_doc.getElementsByClassName('header-block-1_35BAr')[0].getElementsByTagName('i')[0].click();
            years_list=date_doc.getElementsByClassName('header-block-1_35BAr')[0].getElementsByClassName('select-wrapper_17vIt c-row')[0].getElementsByClassName('select-board_2vss_')[0].getElementsByClassName('select-scroll_3h0Ij')[0].getElementsByClassName('select-item_2EG2g c-span2 ');
            
            for(var i = 0;i < years_list.length;i++){
                year = years_list[i].innerText.split('年')[0];
                if(year == years){
                    years_list[i].click()
                    setTimeout(function(){
                        date_doc.getElementsByClassName('header-block-1_35BAr')[0].click();
                        console.log('年份已选');
                    }, 1000);
                    
                }
            }
            
        } 
    },1000)
    
     //操作选择指定月份
    setTimeout(function(){
        console.log('开始选月份');
        month_part = date_doc.getElementsByClassName('header-block-2_2WLJN')[0].getElementsByClassName('c-gap-right-xsmall c-line-clamp1 abstract_2a5LR')[0].innerText.split('月')[0];
        if(month_part != month){
            date_doc.getElementsByClassName('header-block-2_2WLJN')[0].getElementsByTagName('i')[0].click();
            month_list = date_doc.getElementsByClassName('header-block-2_2WLJN')[0].getElementsByClassName('select-wrapper_17vIt c-row')[0].getElementsByClassName('select-board_2vss_')[0].getElementsByClassName('select-scroll_3h0Ij')[0].getElementsByClassName('select-item_2EG2g c-span2 ');
            for(var i = 0;i < month_list.length;i++){
                month_part = month_list[i].innerText.split('月')[0];
                if(month_part == month){
                    month_list[i].click();
                    setTimeout(function(){
                        date_doc.getElementsByClassName('header-block-2_2WLJN')[0].click();
                        console.log('月份已选');
                    }, 1000);
                }
            }
        }
    },3000)
    
    
     //操作选择指定日期
    setTimeout(function(){
        console.log('开始选日期');
        var lists = document.getElementsByClassName('calendar-box_O-50y')[0].getElementsByClassName('content-box_2jPLH')[0].getElementsByClassName('content-row-box_3vTFI');
        for(var i = 0;i < lists.length;i++){
            week_list = lists[i].getElementsByClassName('cell_2mhxE');
            for(var j = 0;j < week_list.length;j++){
                class_name = week_list[j].getElementsByTagName('div')[0].className;
                var reg = RegExp('cell-other-month')
                if(reg.test(class_name) != true){
                    if(class_name.indexOf('cell-inner-box') != 0){
                        date = week_list[j].getElementsByTagName('div')[0].getElementsByClassName('cell-daynumber')[0].innerText;
                        if(date == day){
                            week_list[j].getElementsByTagName('div')[0].click();
                            console.log('日期已选');
                        }
                    }
                    
            }
            }
               
        }
    }, 5000);
    return('日期操作完成')    
};

// 调用js函数
result = data('%s');
return result;
                """%date
    # 打开百度页面
    page = rpa.app.chrome.create('www.baidu.com')
    # 在百度输入框输入日历
    page.input_text('百度输入框','日历')
    # 点击百度一下按钮
    page.click('百度一下按钮')
    # 等待3秒页面数据加载
    sleep(3)
    # 通过execute_js组件执行js脚本
    result = page.execute_js(js_code)
    print(result)

可视化模式

可视化模式通过js组件实现在日历选择器中选择指定的日期
以下代码为执行JS组件中JavaScript脚本那一项脚本内容

function data(params){
    var years = params.split('-')[0]
    var month = params.split('-')[1]
    var day = params.split('-')[2]
    
    var date_doc = document.getElementsByClassName('calendar-box_O-50y')[0].getElementsByClassName('header-box_2Xp1u')[0];
    setTimeout(function(){
       console.log('开始选年份');
        year = date_doc.getElementsByClassName('header-block-1_35BAr')[0].getElementsByTagName('div')[0].getElementsByTagName('span')[0].innerText.split('年')[0];
        if(year != years){
            date_doc.getElementsByClassName('header-block-1_35BAr')[0].getElementsByTagName('i')[0].click();
            
            years_list=date_doc.getElementsByClassName('header-block-1_35BAr')[0].getElementsByClassName('select-wrapper_17vIt c-row')[0].getElementsByClassName('select-board_2vss_')[0].getElementsByClassName('select-scroll_3h0Ij')[0].getElementsByClassName('select-item_2EG2g c-span2 ');
            // console.log(years_list.length)
            for(var i = 0;i < years_list.length;i++){
                year = years_list[i].innerText.split('年')[0];
                if(year == years){
                    // console.log(year)
                    years_list[i].click()
                    setTimeout(function(){
                        date_doc.getElementsByClassName('header-block-1_35BAr')[0].click();
                        console.log('年份已选');
                    }, 1000);
                    
                }
            }
            
        } 
    },1000)
    
    setTimeout(function(){
        console.log('开始选月份');
        month_part = date_doc.getElementsByClassName('header-block-2_2WLJN')[0].getElementsByClassName('c-gap-right-xsmall c-line-clamp1 abstract_2a5LR')[0].innerText.split('月')[0];
        if(month_part != month){
            date_doc.getElementsByClassName('header-block-2_2WLJN')[0].getElementsByTagName('i')[0].click();
            month_list = date_doc.getElementsByClassName('header-block-2_2WLJN')[0].getElementsByClassName('select-wrapper_17vIt c-row')[0].getElementsByClassName('select-board_2vss_')[0].getElementsByClassName('select-scroll_3h0Ij')[0].getElementsByClassName('select-item_2EG2g c-span2 ');
            for(var i = 0;i < month_list.length;i++){
                month_part = month_list[i].innerText.split('月')[0];
                if(month_part == month){
                    month_list[i].click();
                    setTimeout(function(){
                        date_doc.getElementsByClassName('header-block-2_2WLJN')[0].click();
                        console.log('月份已选');
                    }, 1000);
                }
            }
        }
    },3000)
    
    
    
    setTimeout(function(){
        console.log('开始选日期');
        var lists = document.getElementsByClassName('calendar-box_O-50y')[0].getElementsByClassName('content-box_2jPLH')[0].getElementsByClassName('content-row-box_3vTFI');
        for(var i = 0;i < lists.length;i++){
            week_list = lists[i].getElementsByClassName('cell_2mhxE');
            for(var j = 0;j < week_list.length;j++){
                class_name = week_list[j].getElementsByTagName('div')[0].className;
                var reg = RegExp('cell-other-month')
                if(reg.test(class_name) != true){
                    if(class_name.indexOf('cell-inner-box') != 0){
                        date = week_list[j].getElementsByTagName('div')[0].getElementsByClassName('cell-daynumber')[0].innerText;
                        if(date == day){
                            week_list[j].getElementsByTagName('div')[0].click();
                            console.log('日期已选');
                        }
                    }
                    
            }
            }
               
        }
    }, 5000);
    return('日期操作完成')    
};
//通过"''' + date_time + '''"这个方法来传date_time变量值到js中
result = data("''' + date_time + '''");
return result;