章节十四、1-如何在日历中选择日期 - 日期选择

以下演示以https://www.expedia.com/网站为例：

一、接下来我们来定位图中红框标识日期选择框

1、首先我们需要通过定位日期选择框，这样就能点击日期选择框然后跳出弹窗

接下来我们需要从弹窗中选择需要的日期，例如“31”

方法一、演示代码为：

package basicweb;

import java.util.concurrent.TimeUnit;

import org.junit.jupiter.api.AfterEach;
import org.junit.jupiter.api.BeforeEach;
import org.junit.jupiter.api.Test;
import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.chrome.ChromeDriver;

class CalendarSelection {
    
    private WebDriver driver;
    private String url;
    
    @BeforeEach
    void setUp() throws Exception {
        driver = new ChromeDriver();
        url = "https://www.expedia.com/";
        driver.manage().window().maximize();
        driver.manage().timeouts().implicitlyWait(3, TimeUnit.SECONDS);
    }

    @Test
    void test() throws Exception {
        driver.get(url);
//        查找日期输入框，并点击，调出日期选择框
        WebElement riQiKuang = driver.findElement(By.cssSelector("#package-departing-hp-package"));
        riQiKuang.click();
//        选择5月31号
        WebElement riQi = driver.findElement(
                By.xpath("//table//tbody//span[contains(text(),'May')]/parent::button[contains(text(),'31')]"));
        riQi.click();
    }
    
    @AfterEach
    void tearDown() throws Exception {
        Thread.sleep(2000);
//        driver.quit();
    }
}

 

二、定位日期控件

方法二、 

通过定位日期控件中的具体日期我们可以看到，具体日期数字被td--》button---》span三层标签包含，在第一种方法中我们直接定位到具体的数字（//table//tbody//span[contains(text(),'May')]/parent::button[contains(text(),'31')]），复用性不是很高，因此我们通过直接定位到button，然后把所有的button标签放到集合中，通过取元素属性值定位需要选择的日期，避免在自动化工程中对日期需要的更改而重新写定位路径。

package basicweb;

import java.util.List;
import java.util.concurrent.TimeUnit;

import org.junit.jupiter.api.AfterEach;
import org.junit.jupiter.api.BeforeEach;
import org.junit.jupiter.api.Test;
import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.chrome.ChromeDriver;

class CalendarSelection {
    
    private WebDriver driver;
    private String url;
    private RiQi qi;
    
    @BeforeEach
    void setUp() throws Exception {
        System.setProperty("webdriver.chrome.driver", "D:\\WorkSpace_person\\Selenium\\chromedriver.exe");
        driver = new ChromeDriver();
        qi = new RiQi(driver);
        url = "https://www.expedia.com/";
        driver.manage().window().maximize();
        driver.manage().timeouts().implicitlyWait(3, TimeUnit.SECONDS);
    }
    
    @Test
    void test() throws Exception {
        driver.get(url);
//        首先我们需要判断日期是否可以选择（标签中包含disable属性的是不可以选择的)
//        查找日期输入框，并点击，调出日期选择框
        WebElement riQiKuang = driver.findElement(By.cssSelector("#package-departing-hp-package"));
        riQiKuang.click();
        Thread.sleep(3000);
//        定位5月日期范围
        WebElement month = driver.findElement(By.xpath("//caption[contains(text(),'May 2019')]/parent::table"));
        
//        将5月可以选择的日期放入到集合中
        List<WebElement> allValidDates = month.findElements(
                By.xpath("//span[@class='visuallyhidden']/parent::button[@class='datepicker-cal-date']"));
//        通过for循环读取集合中的元素
        for(WebElement date:allValidDates) {
//            判断集合中的元素和我们需要定位的目标日期是否相同，相同则点击
        if(date.getAttribute("data-day").equals("21")) {
            date.click();
            break;
        }
        }
    }
    
    @AfterEach
    void tearDown() throws Exception {
        Thread.sleep(2000);
        driver.quit();
    }
}

 

如果有不明白的小伙伴可以加群“555191854”问我，群里都是软件行业的小伙伴可以相互一起学习讨论。