1. 程式人生 > >Webdriver 處理display:none

Webdriver 處理display:none

開始的時候,一直定位不到,因為是動的。

後面發現,它在表裡。然後去找關於定位表的方法。

最後才發現,是因為display:none的緣故。

然後找方法來實現

Selenium中的waitForCondition使用和編寫自己的waitForElementDisplay方法

在我們在頁面跳轉的時候或者進行了一些操作的時候,我們需要等待某個頁面或者元素的出現。對與頁面的跳轉我們可以用selenium.waitForPageLoad 方法,但是對於等待某個元素的出現並沒有提供,只提供了一個waitForCondition 的方法。

waitForCondition方法會執行傳入的js程式碼,直到條件成立,或者 timout時間到。

  1. selenium.waitForCondition("var value = selenium.browserbot.findElementOrNull(“id1”); value.style.display == 'none'", "10000");  

waitForCondition方法中也可以有運算子的操作

  1. selenium.waitForCondition("var value = selenium.browserbot.findElementOrNull(id1); value.style.display == 'none'", || var value = selenium.browserbot.findElementOrNull(id2); value.style.display == 'none' “, "10000");  

當然每次我們都去寫js程式碼,這樣會很麻煩,而且上面的程式碼只能判斷display屬性為none, 我們可以用selenium 自帶的 isVisible方法來判斷一個Element是否存在。因為isVisible方法判斷的跟全面,它還判斷了visibilityhiden 屬性。所以我們可以建立一個更加通用的方法叫做waitForEelementDisplay 方法。下面是程式碼實現:

  1. package com.safx.selenium;  
  2. import java.util.concurrent.ExecutorService;  
  3. import java.util.concurrent.ScheduledThreadPoolExecutor;  
  4. import java.util.concurrent.TimeUnit;  
  5. import com.safx.utility.CommonTool;  
  6. import com.thoughtworks.selenium.SeleniumException;  
  7. public class DriveSelenium   
  8. {  
  9.     ScheduledThreadPoolExecutor executor = null;  
  10.     public boolean waitForElementDisplay(String locator, String time) {  
  11.         SheduleEntity entity = new SheduleEntity(CommonTool.String2Int(time));  
  12.         this.schedule(entity);  
  13.         int tempTime = 1000;  
  14.         while (!entity.isTimeout()) {  
  15.             if (selenium.isVisible(locator)) { // call selenium.isVisable method  
  16.                 this.shutdownAndAwaitTermination(executor);  
  17.                 return true;  
  18.             }  
  19.             Thread.sleep(tempTime);   
  20.         }  
  21.         throw new SeleniumException("ERROR: wait for '" + locator + "' " + time + "s time out!");  
  22.     }  
  23.     private void schedule(final SheduleEntity shedule) {  
  24.         executor = new ScheduledThreadPoolExecutor(1);  
  25.         executor.schedule(new Runnable() {  
  26.             @Override  
  27.             public void run() {  
  28.                 shedule.setTimeout(true);  
  29.             }  
  30.         }, shedule.getTempTime(), TimeUnit.SECONDS);  
  31.     }  
  32.     private void shutdownAndAwaitTermination(ExecutorService pool) {  
  33.         pool.shutdown(); // Disable new tasks from being submitted  
  34.         try {  
  35.             // Wait a while for existing tasks to terminate  
  36.             if (!pool.awaitTermination(5, TimeUnit.SECONDS)) {  
  37.                 pool.shutdownNow(); // Cancel currently executing tasks  
  38.                 // Wait a while for tasks to respond to being cancelled  
  39.                 if (!pool.awaitTermination(5, TimeUnit.SECONDS))  
  40.                     System.err.println("Pool did not terminate");  
  41.             }  
  42.         } catch (InterruptedException ie) {  
  43.             // (Re-)Cancel if current thread also interrupted  
  44.             pool.shutdownNow();  
  45.             // Preserve interrupt status  
  46.             Thread.currentThread().interrupt();  
  47.         }  
  48.     }  
  49.     class SheduleEntity{  
  50.         private boolean isTimeout = false;  
  51.         private int tempTime;  
  52.         public SheduleEntity( int tempTime ) {  
  53.             this.tempTime = tempTime;  
  54.         }  
  55.         public void setTimeout(boolean isTimeout) {  
  56.             this.isTimeout = isTimeout;  
  57.         }  
  58.         public boolean isTimeout() {  
  59.             return isTimeout;  
  60.         }  
  61.         public int getTempTime() {  
  62.             return tempTime;  
  63.         }  
  64.     }  
  1. }  

在上面的程式碼中,

1.定義一個scheduleEntiy類 用來儲存,timout 延時時間 和 isTimeout 是否已經延時

2. 通過ScheduledThreadPoolExecutor 類 當定時器使用,當timeout時間到是,把ScheduleEntiy類中的isTimeout設定為True。

3. 我們定義了一個waitForElementDisplay 方法。在這個方法中做一個每隔一秒的無限迴圈,迴圈呼叫isVisible這個方法。如果改Element出現則返回true,如果不出現直到timeout時間到,則拋個異常出來。

上週我測的產品出了新版本,上傳檔案這塊的UI程式碼改動了一下。

用sendkeys這招竟然過不去,丟擲了異常:

org.openqa.selenium.ElementNotVisibleException:Element is not currently visible and so may not be interacted with

就是說這個input還在,就是不可見,所以不能sendKeys了。

辦法只有一個,就是用javascript把這個input給弄成可見的!

把這句document.findElementById('123').style.visibility='visible';放在selenium中執行,可是上傳檔案框還是沒出來。我的javascriptcss都比較菜,對於顯示、隱藏頁面元素就只會這一招。正當無奈之際,發現firebug html下面,input 這一行是灰的。這應該說明它是隱藏的,可是改哪兒才能管用呢?

我選中了灰的這一行,右邊style裡顯示出了css樣式display:none

百度了一下display都有什麼值,有none,inline, block...,我把none改成了block,頁面上出現了又大又醜的

 所以:如果你想在做seleniumwebdriver 2.0自動化的時候遇到了介面裡有“上傳檔案”的需求,input type='file' 加了樣式被“美化”沒了,直接sendkey不行的時候,在sendkeys之前,用javascript把它給弄出來:

JavascriptExecutor j= (JavascriptExecutor)driver;

j.executeScript("document.findElementById('123').style.display='block';");

然後再WebElement.sendKeys ("c:\abc.txt");

就OK了!這樣雖然不太優雅,但也是沒有辦法中的辦法。必竟自動化程式碼不能卡在這裡過不去。檔案上傳不上去,之後的一系列驗證工作都做不了。同理的還有下拉選單中的二級選單,有時候一閃就沒,也可以把visiblility:hidden改成visible,同時設定好lefttop值,讓它顯示出來。就能繼續了。

附上我為了解決這個問題做的網頁(為了節省登入產品的時間,我單獨做了一個網頁來模擬這個問題)

和在firebug裡觀察到情況。


心裡暗叫一聲“慚愧”,一直嫌javascript和css麻煩,不願意碰它們,可終歸躲不過只能直面困難了。我爸幫我把多年前的javascript權威指南給帶新家去了,以後沒事得翻一翻。

1、如果在樣式檔案或頁面檔案程式碼中直接用display:none對元素進行了隱藏,載入頁面後,在沒有通過js設定樣式使元素顯示的前提下,使用js程式碼會無法正確獲得該元素的一些屬性,比如offSetTop,offSetLeft等,返回的值會為0,通過js設定style.display來使元素顯示後才能正確獲得這些值。

2、使用display:none隱藏的元素不會被百度等搜尋網站檢索,會影響到網站的SEO,某些情況下可以使用left:-100000px來達到同樣效果。

3、 如果是通過樣式檔案或<style>css</style>方式來設定元素的display:none樣式,用js設定style.display=""並不能使元素顯示,可以使用blockinline等值來代替。通過style="display:none"直接在元素上進行的設定不會有這個問題

4、有些情況下可以使用style.visibility來代替style.display,但是要注意的是style.visibility隱藏元素時會保留元素在頁面上所佔的空間,而style.display隱藏元素且讓出所佔頁面空間。

相關推薦

Webdriver 處理display:none

開始的時候,一直定位不到,因為是動的。 後面發現,它在表裡。然後去找關於定位表的方法。 最後才發現,是因為display:none的緣故。 然後找方法來實現 Selenium中的waitForCondition使用和編寫自己的waitForElementDisplay方法

display:none與visible:hidden的區別

得到 title 元素 body 區別 gre 改變 ack -c display:none和visible:hidden都能把網頁上某個元素隱藏起來,但兩者有區別: display:none ---不為被隱藏的對象保留其物理空間,即該對象在頁面上徹底消失,通俗來說就是看不

swiper display:none 後 在顯示 滑動問題

class 自動 .cn serve 必須 api 實例 com nbsp 一般這種問題 必須在本身元素 或者父元素 顯示出來 然後調用swiper實例 或者只需加兩行 observer:true,//修改swiper自己或子元素時,自動初始化swiper

hidden="hidden",display:none, visibility:hidden 三者的區別

但是 效果 isp 大神 log 語義 .com ted input 三者都可以實現隱藏元素的效果 1:display:none 就是把元素隱藏,即在頁面上看不到這個元素,並且不占據任何位置 2:hidden="hidden"在頁面展示出來效果跟display:no

關於 transparent rgba display:none; opacity visiblity 關於em

tran rgb 一次 display 使用 spa 需要 其余 htm 關於 transparent rgba display:none; opacity visiblity display 之後不會占位。 其余都會占位 opacity 還會繼承,子元素也會

表單隱藏域與display:none

隱藏域 display code idt 兩種 log 提交 點擊事件 rip 有時候前端進行表單填寫是分步驟的,每一步的時候其他步驟相關的表單視圖不可見; 針對"不可見",以下有兩種處理方式: ①display:none 這種方式呢,比較簡單,就是將三個步驟分3個d

display:none visibility,opacity區別

display:none visibility,opacity區別 1、display:none 會脫離文件流,完全消失不見。 2、visibility: hidden 仍會在原來的文件流中佔據位置,但是在上面的點選事件或別的事件都不會觸發。 3、opacity: 0 仍佔

display:none引發的血案

背景: 此處需要開發一個馬甲號的新增功能,其中涉及到了圖片的上傳,webuploader.js上傳圖片 頁面載入時彈框是隱藏著的,但點選加號按鈕時才彈出彈框 問題: 點選“選擇圖片”不生效了,檔案選擇框一直彈不出來   彎路: 1.懷疑是該外掛本身有問題,棄坑,打算用H5的方法<

css實現 display: nonedisplay: block的切換動畫

話不多說先上程式碼 .index-detail-list .item-contain{ display: none; overflow: hidden; padding: 14px 14px 9px; border: 1px solid #ecec

visibility=hidden, opacity=0,display:none

visibility=hidden, opacity=0,display:none opacity=0,該元素隱藏起來了,但不會改變頁面佈局,並且,如果該元素已經繫結一些事件,如click事件,那麼點選該區域,也能觸發點選事件的。 visibility=hidden,該元素隱藏起來了,但不會

CSS魔法堂:display:none與visibility:hidden的恩怨情仇

前言  還記得面試時被問起"請說說display:none和visibility:hidden的區別"嗎?是不是回答完display:none不佔用原來的位置,而visibility:hidden保留原來的位置後,面試官就會心一笑呢?其實不止那麼簡單呢!本文我們將一起深究它倆的恩怨情仇,下次面試時我們可以回答

swiper 父級元素display:none 之bug

問題描述: 同一個頁面,點選底部tab按鈕切換div的顯示與隱藏,點選到第四個頁面時 輪播圖總是不動,出bug var mySwiper = new Swiper('.swiper-contain', { autoplay: 3000,//可選選項,自動滑動 speed: 300, loo

display:none和visibility:hidden兩者的區別

使用css讓元素不可見的方法有很多種,裁剪、定位到螢幕外邊、透明度變換等都是可以的。但是最常用兩種方式就是設定元素樣式為display: none或者visibility: hidden。很多公司的面試官也常常會問面試者這兩者之間的區別。   display與元素的隱藏 如果給

display:none;visibility:hidden;和opacity:0;的區別

display:none; visibility:hidden; opacity:0; 它們都可以讓元素隱藏掉,但是它們之間還是有區別的 display:none;隱藏後不佔空間 而另外兩個雖然隱藏了元素,但是還是佔據著空間 而transition對於display:none;和visibilit

關於面試總結10-selenium中隱藏元素如何定位?(hidden、display: none)

前言 面試題:selenium中隱藏元素如何定位?這個是很多面試官喜歡問的一個題,如果單純的定位的話,隱藏元素和普通不隱藏元素定位沒啥區別,用正常定位方法就行了 但是吧~~~很多面試官自己都搞不清楚啥叫定位,啥叫操作元素(如click,clear,send_keys) 隱藏元素 如下圖有個輸入框和一個登

display:none 與 visibility:hidden 的區別是什麼?

共性:都能把網頁上某個元素隱藏起來 區別: display:none不為被隱藏的物件保留其物理空間,即該物件在頁面上徹底消失,通俗來說即看不見也摸不到 visiblility:hidden使物件在網頁上不可見,但該物件在網頁上所佔的空間沒有改變,通俗講

Java+Selenium3方法篇21-webdriver處理瀏覽器多視窗切換

       經過前面兩篇文章的鋪墊,我們這篇介紹,webdriver如何處理,一個瀏覽器上多個視窗之間切換的問題。我們先腦補這樣一個測試場景,你在頁面A點選一個連線,會在新的tab視窗開啟頁面B,這個時候,你在頁面B點選一個連線,會在新的tab視窗開啟頁面C。這種情況,在

CSS進階(19)—— 詳解display:none和visibility: hidden的區別

  本章的主要內容是利用CSS控制元素的“顯隱”,說道顯隱,之前其實已經提供了一些非常規的CSS方法,如clip,z-index,opacity等,本章我們來深入探究一下display:none和visibility: hidden折兩個屬性。 1.display與元素的顯隱

IE瀏覽器不支援display:none導致option不能隱藏的問題

專案場景:級聯的select元素,根據一級select的選擇,二級select中的option選項需要對應的隱藏或顯示。 原來的做法是display:none和display:block來隱藏和顯示o

[jQuery]無法準確獲取隱藏元素(display:none)寬度(width)和高度(height)的新解決方案

在開發一個彈框外掛時,遇到一個需要計算隱藏彈框的高度問題。用jquery裡面的方法$('box').outerHeight(true)得到隱藏層高度的值隨著滾動條滾動總是不一致。沒轍,放棄這一方法去獲取,原來生js中的offsetHeight來試試看,$(''box")[