章節十4、1-如何在日曆中選擇日期 - 日期選擇

如下演示以https://www.expedia.com/網站爲例：

1、接下來咱們來定位圖中紅框標識日期選擇框

一、首先咱們須要經過定位日期選擇框，這樣就能點擊日期選擇框而後跳出彈窗

接下來咱們須要從彈窗中選擇須要的日期，例如「31」

方法1、演示代碼爲：

 1 package basicweb;
 2 
 3 import java.util.concurrent.TimeUnit;
 4 
 5 import org.junit.jupiter.api.AfterEach;
 6 import org.junit.jupiter.api.BeforeEach;
 7 import org.junit.jupiter.api.Test;
 8 import org.openqa.selenium.By;
 9 import org.openqa.selenium.WebDriver;
10 import org.openqa.selenium.WebElement;
11 import org.openqa.selenium.chrome.ChromeDriver;
12 
13 class CalendarSelection {
14     
15     private WebDriver driver;
16     private String url;
17     
18     @BeforeEach
19     void setUp() throws Exception {
20         driver = new ChromeDriver();
21         url = "https://www.expedia.com/";
22         driver.manage().window().maximize();
23         driver.manage().timeouts().implicitlyWait(3, TimeUnit.SECONDS);
24     }
25 
26     @Test
27     void test() throws Exception {
28         driver.get(url);
29 //        查找日期輸入框，並點擊，調出日期選擇框
30         WebElement riQiKuang = driver.findElement(By.cssSelector("#package-departing-hp-package"));
31         riQiKuang.click();
32 //        選擇5月31號
33         WebElement riQi = driver.findElement(
34                 By.xpath("//table//tbody//span[contains(text(),'May')]/parent::button[contains(text(),'31')]"));
35         riQi.click();
36     }
37     
38     @AfterEach
39     void tearDown() throws Exception {
40         Thread.sleep(2000);
41 //        driver.quit();
42     }
43 }

 

2、定位日期控件

方法2、 

經過定位日期控件中的具體日期咱們能夠看到，具體日期數字被td--》button---》span三層標籤包含，在第一種方法中咱們直接定位到具體的數字（//table//tbody//span[contains(text(),'May')]/parent::button[contains(text(),'31')]），複用性不是很高，所以咱們經過直接定位到button，而後把全部的button標籤放到集合中，經過取元素屬性值定位須要選擇的日期，避免在自動化工程中對日期須要的更改而從新寫定位路徑。

 1 package basicweb;
 2 
 3 import java.util.List;
 4 import java.util.concurrent.TimeUnit;
 5 
 6 import org.junit.jupiter.api.AfterEach;
 7 import org.junit.jupiter.api.BeforeEach;
 8 import org.junit.jupiter.api.Test;
 9 import org.openqa.selenium.By;
10 import org.openqa.selenium.WebDriver;
11 import org.openqa.selenium.WebElement;
12 import org.openqa.selenium.chrome.ChromeDriver;
13 
14 class CalendarSelection {
15     
16     private WebDriver driver;
17     private String url;
18     private RiQi qi;
19     
20     @BeforeEach
21     void setUp() throws Exception {
22         System.setProperty("webdriver.chrome.driver", "D:\\WorkSpace_person\\Selenium\\chromedriver.exe");
23         driver = new ChromeDriver();
24         qi = new RiQi(driver);
25         url = "https://www.expedia.com/";
26         driver.manage().window().maximize();
27         driver.manage().timeouts().implicitlyWait(3, TimeUnit.SECONDS);
28     }
29     
30     @Test
31     void test() throws Exception {
32         driver.get(url);
33 //        首先咱們須要判斷日期是否能夠選擇（標籤中包含disable屬性的是不能夠選擇的)
34 //        查找日期輸入框，並點擊，調出日期選擇框
35         WebElement riQiKuang = driver.findElement(By.cssSelector("#package-departing-hp-package"));
36         riQiKuang.click();
37         Thread.sleep(3000);
38 //        定位5月日期範圍
39         WebElement month = driver.findElement(By.xpath("//caption[contains(text(),'May 2019')]/parent::table"));
40         
41 //        將5月能夠選擇的日期放入到集合中
42         List<WebElement> allValidDates = month.findElements(
43                 By.xpath("//span[@class='visuallyhidden']/parent::button[@class='datepicker-cal-date']"));
44 //        經過for循環讀取集合中的元素
45         for(WebElement date:allValidDates) {
46 //            判斷集合中的元素和咱們須要定位的目標日期是否相同，相同則點擊
47         if(date.getAttribute("data-day").equals("21")) {
48             date.click();
49             break;
50         }
51         }
52     }
53     
54     @AfterEach
55     void tearDown() throws Exception {
56         Thread.sleep(2000);
57         driver.quit();
58     }
59 }

 

若是有不明白的小夥伴能夠加羣「555191854」問我，羣裏都是軟件行業的小夥伴能夠相互一塊兒學習討論。