Selenium IDE: Làm thế nào để chọn ngày có sẵn tiếp theo từ datepicker

Question

Tôi muốn selen test IDE của tôi để chạy như các bước dưới đây để chọn ngày tự động:

• Bấm khởi hành ngày để mở datepicker
• Bắt đầu với ngày hiện được chọn, lặp qua các ngày cho đến ngày tiếp theo có sẵn (Nếu được yêu cầu chuyển sang tháng tiếp theo hoặc năm để tìm ngày tiếp theo có sẵn)
• Chọn ngày có sẵn từ datepicker

Ai đó có thể chỉ cho tôi là tôi mới làm quen với selen về cách thực hiện điều này cho ví dụ trên không? Tất cả các kịch bản của tôi có thể làm tại thời điểm này là mở lịch.

Dưới đây là html Tôi quản lý để nhận phù hợp với các ảnh chụp màn hình ở trên:

//Months drop down 
    <select class="ui-datepicker-month" data-handler="selectMonth" data-event="change"> 
    <option value="2" selected="selected">Mar 
    </option><option value="3">Apr</option> 
    <option value="4">May</option> 
    <option value="5">Jun</option> 
    <option value="6">Jul</option> 
    <option value="7">Aug</option> 
    <option value="8">Sep</option> 
    <option value="9">Oct</option> 
    </select> 
//Years drop down 
    <select class="ui-datepicker-year" data-handler="selectYear" data-event="change"> 
    <option value="2016" selected="selected">2016</option> 
    </select> 
    <table class="ui-datepicker-calendar"> 
//days labels 
    <thead> 
    <tr> 
    <th scope="col"><span title="Monday">Mo</span></th> 
    <th scope="col"><span title="Tuesday">Tu</span></th> 
    <th scope="col"><span title="Wednesday">We</span></th> 
    <th scope="col"><span title="Thursday">Th</span></th> 
    <th scope="col"><span title="Friday">Fr</span></th> 
    <th scope="col" class="ui-datepicker-week-end"><span title="Saturday">Sa</span></th> 
    <th scope="col" class="ui-datepicker-week-end"><span title="Sunday">Su</span></th> 
    </tr> 
    </thead> 
    <tbody> 
//dates 
    <tr> 
    <td class=" ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled">&nbsp;</td> 
    <td class=" ui-datepicker-unselectable ui-state-disabled " title="No available flights on this date"><span class="ui-state-default">1</span></td> 
    <td class=" ui-datepicker-unselectable ui-state-disabled " title="No available flights on this date"><span class="ui-state-default">2</span></td> 
    <td class=" ui-datepicker-unselectable ui-state-disabled " title="No available flights on this date"><span class="ui-state-default">3</span></td> 
    <td class=" ui-datepicker-unselectable ui-state-disabled " title="No available flights on this date"><span class="ui-state-default">4</span></td> 
    <td class=" ui-datepicker-week-end ui-datepicker-unselectable ui-state-disabled " title="No available flights on this date"><span class="ui-state-default">5</span></td> 
    <td class=" ui-datepicker-week-end ui-datepicker-unselectable ui-state-disabled " title="No available flights on this date"><span class="ui-state-default">6</span></td></tr> 
    <tr> 
    <td class=" ui-datepicker-unselectable ui-state-disabled " title="No available flights on this date"><span class="ui-state-default">7</span></td> 
    <td class=" ui-datepicker-unselectable ui-state-disabled " title="No available flights on this date"><span class="ui-state-default">8</span></td> 
    ...same process till last week of dates (bottom row of calendar in screenshot) 
    <tr> 
    <td class=" ui-datepicker-days-cell-over ui-datepicker-current-day" title="Click to see flights on this date" data-handler="selectDay" data-event="click" data-month="2" data-year="2016"><a class="ui-state-default ui-state-active" href="#">28</a></td> 
    <td class=" ui-datepicker-unselectable ui-state-disabled " title="No available flights on this date"><span class="ui-state-default">29</span></td> 
    <td class=" ui-datepicker-unselectable ui-state-disabled " title="No available flights on this date"><span class="ui-state-default">30</span></td> 
    <td class=" ui-datepicker-unselectable ui-state-disabled " title="No available flights on this date"><span class="ui-state-default">31</span></td> 
    <td class=" ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled">&nbsp;</td><td class=" ui-datepicker-week-end ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled">&nbsp;</td> 
    <td class=" ui-datepicker-week-end ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled">&nbsp;</td> 
    </tr> 
    </tbody> 
    </table> 

Answer 1

Tự động hoá công việc như vậy trong một Selenium IDE sẽ khá thách thức kể từ khi có một logic không tầm thường tham gia vào nhận ngày tiếp theo có sẵn, bạn nên xem xét switching to Selenium WebDriver chọn một trong các liên kết ngôn ngữ selen có sẵn.

Đây là mã làm việc được thực hiện bằng cách sử dụng Python language Selenium bindings. Ý tưởng là để:

• thuyết minh một WebDriver (sử dụng Firefox() trong ví dụ này nhưng có những sự lựa chọn khác nữa)
• phóng to cửa sổ trình duyệt
• điều hướng đến URL (http://www.jet2.com)
• chờ đợi cho đến khi trang được tải một cách rõ ràng (docs)
• điền vào các trường khởi hành và đích đến
• nhấp vào trường "Thoát" để kích hoạt lịch được hiển thị
• trong lịch, xác định ngày hiện tại - có ngày ui-datepicker-current-day lớp
• kiểm tra xem có ngày có sẵn trong tháng này sử dụng kỹ thuật vị trí "bởi XPath" không và following axis. Nếu có, hãy in ra và nhấp vào.
• nếu chúng tôi không tìm thấy ngày có sẵn tiếp theo trong tháng này, khởi tạo và vòng lặp "vô tận" và nhấp vào nút "Tiếp theo" tháng kiểm tra xem chúng tôi có sẵn một ngày có sẵn hay không. In ra và nhấp vào nếu tìm thấy và thoát khỏi vòng lặp. Nếu không, hãy nhấp vào nút "Tiếp theo".
• nếu chúng ta không có nút "Next" - sau đó chúng ta đang ở cuối một năm, chọn năm tiếp theo trong danh sách thả xuống năm, tiếp tục vòng lặp
• đóng tài xế khi thực hiện xong

Bộ luật:

from selenium import webdriver 
from selenium.common.exceptions import NoSuchElementException 
from selenium.webdriver import ActionChains 
from selenium.webdriver.common.by import By 
from selenium.webdriver.support.select import Select 
from selenium.webdriver.support.ui import WebDriverWait 
from selenium.webdriver.support import expected_conditions as EC 


FROM = "Leeds Bradford" 
TO = "Budapest BUD" 

driver = webdriver.Firefox() # or, webdriver.Chrome(), or webdriver.PhantomJS() or etc. 
driver.maximize_window() 
driver.get("http://www.jet2.com") 

wait = WebDriverWait(driver, 10) 
actions = ActionChains(driver) 

# wait for the page to load 
wait.until(EC.presence_of_element_located((By.ID, "departure-airport-input"))) 

# fill out the form 
driver.find_element_by_id("departure-airport-input").send_keys(FROM) 
wait.until(EC.presence_of_element_located((By.CSS_SELECTOR, "#ui-id-1 .ui-menu-item"))).click() 

driver.find_element_by_id("destination-airport-input").send_keys(TO) 
wait.until(EC.presence_of_element_located((By.CSS_SELECTOR, "#ui-id-2 .ui-menu-item"))).click() 

# select date 
datepicker = driver.find_element_by_id("departure-date-selector") 
actions.move_to_element(datepicker).click().perform() 

# find the calendar, month and year picker and the current date 
calendar = driver.find_element_by_id("departureDateContainer") 
month_picker = Select(calendar.find_element_by_class_name("ui-datepicker-month")) 
year_picker = Select(calendar.find_element_by_class_name("ui-datepicker-year")) 
current_date = calendar.find_element_by_class_name("ui-datepicker-current-day") 

# printing out current date 
month = month_picker.first_selected_option.text 
year = year_picker.first_selected_option.text 
print("Current date: {day} {month} {year}".format(day=current_date.text, month=month, year=year)) 

try: 
    # see if we have an available date in this month 
    next_available_date = current_date.find_element_by_xpath("following::td[@data-handler='selectDay' and ancestor::div/@id='departureDateContainer']") 
    print("Found an available date: {day} {month} {year}".format(day=next_available_date.text, month=month, year=year)) 
    next_available_date.click() 
except NoSuchElementException: 
    # looping over until the next available date found 
    while True: 
     # click next, if not found, select the next year 
     try: 
      calendar.find_element_by_class_name("ui-datepicker-next").click() 
     except NoSuchElementException: 
      # select next year 
      year = Select(calendar.find_element_by_class_name("ui-datepicker-year")) 
      year.select_by_visible_text(str(int(year.first_selected_option.text) + 1)) 

     # reporting current processed month and year 
     month = Select(calendar.find_element_by_class_name("ui-datepicker-month")).first_selected_option.text 
     year = Select(calendar.find_element_by_class_name("ui-datepicker-year")).first_selected_option.text 
     print("Processing {month} {year}".format(month=month, year=year)) 

     try: 
      next_available_date = calendar.find_element_by_xpath(".//td[@data-handler='selectDay']") 
      print("Found an available date: {day} {month} {year}".format(day=next_available_date.text, month=month, year=year)) 
      next_available_date.click() 
      break 
     except NoSuchElementException: 
      continue 

driver.close() 

Kiểm tra kết quả:

• Leeds Bradford -> Antalya AYT (bên cạnh có sẵn ngày trong tháng):

  Current date: 28 Mar 2016 
  Processing Apr 2016 
  Found an available date: 4 Apr 2016 
  

• Leeds Bradford -> Budapest BUD (ngày tiếp theo có sẵn trong tháng giống như ngày hiện tại):

  Current date: 12 Feb 2016 
  Found an available date: 15 Feb 2016 
  

• ? (ngày có sẵn tiếp theo trong năm tới)

Answer 2

Đây là phiên bản Java.

import java.util.List; 

import org.openqa.selenium.By; 
import org.openqa.selenium.WebDriver; 
import org.openqa.selenium.WebElement; 
import org.openqa.selenium.firefox.FirefoxDriver; 

public class DatePicketJet2 { 
    public static WebDriver browser; 

    public static void main(String args[]) throws InterruptedException { 

     browser = new FirefoxDriver(); 
     String url = "http://www.jet2.com/"; 

     browser.get(url); 
     browser.manage().window().maximize(); 

     browser.findElement(By.id("departureAirportList")).click(); 
     WebElement departureCountry = browser.findElement(By.id("destinations-uk")); 
     WebElement departureCityLocator = departureCountry.findElement(By.tagName("ul")); 
     List<WebElement> departureCities = departureCityLocator.findElements(By.tagName("li")); 
     /* 
     for (WebElement we : departureCities) { 
      System.out.println(we.getText()); 
     } 
     */ 
     departureCities.get(1).click(); 

     browser.findElement(By.id("destinationAirportList")).click(); 

     WebElement destinationCountry = browser.findElement(By.id("destinations-country")); 
     WebElement destinationCityLocator = destinationCountry.findElement(By.tagName("ul")); 
     List<WebElement> destinationCities = destinationCityLocator.findElements(By.tagName("li")); 
     /* 
     for (WebElement we : destinationCities) { 
      System.out.println(we.getText()); 
     } 
     */ 
     destinationCities.get(1).click(); 

     browser.findElement(By.id("departure-date-selector")).click(); 

     WebElement departureMonth = browser.findElement(By.tagName("tbody")); 
     //System.out.println(departureMonth.getText()); 
     List<WebElement> departureDate = departureMonth.findElements(By.tagName("a")); 
     for (WebElement we : departureDate) { 
      System.out.println("~" + we.getText()); 
      we.click(); 
      break; 
     } 

     browser.findElement(By.id("return-date-selector")).click(); 
     Thread.sleep(1000); 
     WebElement returnMonth = browser.findElement(By.tagName("tbody")); 
     System.out.println("<>" + returnMonth.isEnabled()); 
     System.out.println(returnMonth.getText()); 
     List<WebElement> returnDate = returnMonth.findElements(By.tagName("a")); 
     for (WebElement we1 : returnDate) { 
      System.out.println("~" + we1.getText()); 
      we1.click(); 
      break; 
     } 
     Thread.sleep(1000); 
     browser.close(); 
    } 
} 

Nhìn ra cho các <tbody> và tìm tất cả các ngày có thể nhìn thấy sử dụng thẻ theo tên như "a" bạn sẽ nhận được tất cả các ngày đó là khả thi hoặc hiển thị trong màu xanh.

Sau đó tinh chỉnh logic của bạn dựa trên yêu cầu của bạn.

Answer 3

Rất khó để thực hiện điều này thông qua Selenium IDE. Tham khảo liên kết here và xem cách thức hoạt động của gotoIF. Tải xuống các tiện ích mở rộng người dùng từ here và thêm vào IDE selen của bạn. Nếu bạn có thể sử dụng Trình quản trị web Selenium thì bạn sẽ dễ dàng đạt được điều này.

Ví dụ bên dưới của tôi là thực hiện thông qua Selenium IDE. Tôi đã đưa ra ví dụ chỉ để chọn chuyến bay đi. Trong cả hai trường hợp, trước tiên tôi gửi url với ngày hôm nay là ngày khởi hành và ngày đến. Sau đó, tôi sử dụng gotoIf để chọn ngày có sẵn đầu tiên cho chuyến đi.

Ví dụ 1:

<?xml version="1.0" encoding="UTF-8"?> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
<head profile="http://selenium-ide.openqa.org/profiles/test-case"> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<link rel="selenium.base" href="http://www.jet2.com/" /> 
<title>21jet2_01</title> 
</head> 
<body> 
<table cellpadding="1" cellspacing="1" border="1"> 
<thead> 
<tr><td rowspan="1" colspan="3">21jet2_01</td></tr> 
</thead><tbody> 
<tr> 
    <td>open</td> 
    <td>/cheap-flights/leeds-bradford/larnaca/2016-02-07/2016-02-07?adults=2</td> 
    <td></td> 
</tr> 
<tr> 
    <td>storeElementPresent</td> 
    <td>xpath=//div[@class='monthview outbound ']/div[2]/table/tbody/tr/td[starts-with(@class, &quot;LS1FlightDay flights&quot;)]/a/div/span[@class='fare']</td> 
    <td>x</td> 
</tr> 
<tr> 
    <td>gotoIf</td> 
    <td>${x} == true</td> 
    <td>select</td> 
</tr> 
<tr> 
    <td>label</td> 
    <td>clickNextMonth</td> 
    <td></td> 
</tr> 
<tr> 
    <td>clickAndWait</td> 
    <td>xpath=//div[@class='monthview outbound ']/div/div[2]/a[@class='changepage nextmonth icon icon-arrow-next']</td> 
    <td></td> 
</tr> 
<tr> 
    <td>storeElementPresent</td> 
    <td>xpath=//div[@class='monthview outbound ']/div[2]/table/tbody/tr/td[starts-with(@class, &quot;LS1FlightDay flights&quot;)]/a/div/span[@class='fare']</td> 
    <td>y</td> 
</tr> 
<tr> 
    <td>gotoIf</td> 
    <td>${y} == false</td> 
    <td>clickNextMonth</td> 
</tr> 
<tr> 
    <td>label</td> 
    <td>select</td> 
    <td></td> 
</tr> 
<tr> 
    <td>click</td> 
    <td>xpath=//div[@class='monthview outbound ']/div[2]/table/tbody/tr/td[starts-with(@class, &quot;LS1FlightDay flights&quot;)]/a/div/span[@class='fare']</td> 
    <td></td> 
</tr> 
</tbody></table> 
</body> 
</html> 

Ví dụ 2:

<?xml version="1.0" encoding="UTF-8"?> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
<head profile="http://selenium-ide.openqa.org/profiles/test-case"> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<link rel="selenium.base" href="http://www.jet2.com/" /> 
<title>21jet2_01</title> 
</head> 
<body> 
<table cellpadding="1" cellspacing="1" border="1"> 
<thead> 
<tr><td rowspan="1" colspan="3">21jet2_01</td></tr> 
</thead><tbody> 
<tr> 
    <td>open</td> 
    <td>/cheap-flights/belfast/alicante/2016-02-07/2016-02-07?adults=2</td> 
    <td></td> 
</tr> 
<tr> 
    <td>storeElementPresent</td> 
    <td>xpath=//div[@class='monthview outbound ']/div[2]/table/tbody/tr/td[starts-with(@class, &quot;LS1FlightDay flights&quot;)]/a/div/span[@class='fare']</td> 
    <td>x</td> 
</tr> 
<tr> 
    <td>gotoIf</td> 
    <td>${x} == true</td> 
    <td>select</td> 
</tr> 
<tr> 
    <td>label</td> 
    <td>clickNextMonth</td> 
    <td></td> 
</tr> 
<tr> 
    <td>clickAndWait</td> 
    <td>xpath=//div[@class='monthview outbound ']/div/div[2]/a[@class='changepage nextmonth icon icon-arrow-next']</td> 
    <td></td> 
</tr> 
<tr> 
    <td>storeElementPresent</td> 
    <td>xpath=//div[@class='monthview outbound ']/div[2]/table/tbody/tr/td[starts-with(@class, &quot;LS1FlightDay flights&quot;)]/a/div/span[@class='fare']</td> 
    <td>y</td> 
</tr> 
<tr> 
    <td>gotoIf</td> 
    <td>${y} == false</td> 
    <td>clickNextMonth</td> 
</tr> 
<tr> 
    <td>label</td> 
    <td>select</td> 
    <td></td> 
</tr> 
<tr> 
    <td>click</td> 
    <td>xpath=//div[@class='monthview outbound ']/div[2]/table/tbody/tr/td[starts-with(@class, &quot;LS1FlightDay flights&quot;)]/a/div/span[@class='fare']</td> 
    <td></td> 
</tr> 
</tbody></table> 
</body> 
</html>