设置style属性为display:none，关闭时间弹框

背景：

12306时间输入框的练习，这个时间输入框是readonly属性，通过js代码先把属性删除了，再写上时间，关闭时间选择弹框。

关闭时间选择弹框的手工操作有以下这几个方法：

①输入完时间后直接按enter键就可以关闭时间弹框

②输入完时间后直接按tab键就可以关闭时间弹框

③输入完时间后直接点击“出发地” “到达地”的输入框后时间选择框也能自动关闭

④点击其他文字，例如“出发地” 、“到达地” 、“出发日期”也可以让时间弹框关闭

还有其他很多类似的方法，不再举例

验证①②想法

WebDriver driver = openBrowser("chrome");
driver.get("https://www.12306.cn/index/index.html");
//去除时间框readonly属性，方便使用sendkeys()
WebElement element = driver.findElement(By.id("train_date"));
JavascriptExecutor javascriptExecutor = (JavascriptExecutor) driver;
javascriptExecutor.executeScript("arguments[0].removeAttribute('readonly')",element);
Thread.sleep(1000);
//清空输入框
element.clear();
Thread.sleep(1000);
//输入日期
element.sendKeys("2021-07-19");

//尝试通过按tab enter键关闭时间框
Thread.sleep(1000);
element.sendKeys(Keys.TAB);
Thread.sleep(1000);
element.sendKeys(Keys.ENTER);

结果失败了，时间选择弹框岿然不动遮盖了很多按钮！

验证③想法

         WebDriver driver = openBrowser("chrome");
        driver.get("https://www.12306.cn/index/index.html");
        Thread.sleep(1000);
        driver.manage().window().maximize();
        //去除readonly属性
        WebElement element = driver.findElement(By.id("train_date"));
        JavascriptExecutor javascriptExecutor = (JavascriptExecutor) driver;
        javascriptExecutor.executeScript("arguments[0].removeAttribute('readonly')",element);
        //清空输入框
        Thread.sleep(2000);
        element.clear();
        //输入时间
        Thread.sleep(2000);
        element.sendKeys("2021-07-19");

        //点击出发地输入框，看时间选择框是否关闭
        driver.findElement(By.id("fromStationText")).click();

结果失败了，时间选择弹框岿然不动遮盖了很多按钮！

验证④的想法

        WebDriver driver = openBrowser("chrome");
        driver.get("https://www.12306.cn/index/index.html");
        Thread.sleep(1000);
        driver.manage().window().maximize();
        //去除readonly属性
        WebElement element = driver.findElement(By.id("train_date"));
        JavascriptExecutor javascriptExecutor = (JavascriptExecutor) driver;
        javascriptExecutor.executeScript("arguments[0].removeAttribute('readonly')",element);
        //清空输入框
        Thread.sleep(2000);
        element.clear();
        //输入时间
        Thread.sleep(2000);
        element.sendKeys("2021-07-19");
        Thread.sleep(2000);
      
        //点击“出发日期”文字，看时间框是否关闭
        driver.findElement(By.xpath("/html/body/div[3]/div[2]/div/div[1]/div/div[2]/div[1]/div[1]/div[2]/label")).click();
        

       

结果失败了，时间选择弹框岿然不动遮盖了很多按钮！

全部不行！！！！

仔细观察这个时间弹框的页面源代码：

 有个时间选择框的style,这个可以控制显示还是关闭

<div class="cal-wrap" style="left: 556.5px; top: 382px; display: block;">

通过js代码关闭这个弹框

WebDriver driver = openBrowser("chrome");
driver.get("https://www.12306.cn/index/");
WebElement element=driver.findElement(By.id("train_date"));
JavascriptExecutor javascriptExecutor=(JavascriptExecutor)driver;
//拿掉readonly的属性       javascriptExecutor.executeScript("arguments[0].removeAttribute('readonly')",element);
//清楚输入框并输入时间
Thread.sleep(2000);
element.clear();
Thread.sleep(2000);
element.sendKeys("2020-10-01");
Thread.sleep(2000);
//不让时间选择框显示
WebElement element2=driver.findElement(By.xpath("//div[@class='cal-wrap']"));  
javascriptExecutor.executeScript("arguments[0].setAttribute('style','display:none')",element2);

最终实现了关闭时间弹框的诉求！