2013-07-12 5 views
6

편집 : 참조 된 질문에 나열된 오류와 함께 실패 내 셀레늄 테스트를 일으키는 그래서 기본적으로 나는 파이어 폭스 드라이버 및 id="page-content"와 DIV를 사용하고 http://code.google.com/p/selenium/issues/detail?id=5717Selenium Firefox 드라이버가 부모 모드에서 오버플로 : 내 모습이 보이지 않을 때 내 모달이 표시되지 않는 이유는 무엇입니까?

: 나는 이미 열려 문제가 있다고 생각 : "Element is not currently visible and so may not be interacted with" but another is?는 그 ID는, overflow: hidden의 CSS 스타일이 버그가 있다는 사실에 문제를 추적 할 수 있었다 아니면 내가 뭔가 잘못하고있는 중이 야?

내가 셀레늄 WebDriver 버전을 사용하고 있습니다 : 2.33.0.0, 파이어 폭스 버전 : 22

테스트 및 웹 사이트의 소스는 여기에 있습니다 : https://github.com/tonyeung/selenium-overflow-issue 빠른 참고로

는 다음 HTML은 아래의 테스트 페이지입니다 . 셀레늄 WebDriver 소스에 따르면 http://plnkr.co/edit/LzHqxAz0f2GurbL9BGyu?p=preview

<!DOCTYPE html> 
<html data-ng-app="myApp"> 
    <head lang="en"> 
     <meta charset="utf-8"> 
     <title>Selenium Test</title> 

     <!-- // DO NOT REMOVE OR CHANGE ORDER OF THE FOLLOWING // --> 
     <!-- bootstrap default css (DO NOT REMOVE) --> 
     <link rel="stylesheet" href="css/bootstrap.min.css?v=1"> 
     <link rel="stylesheet" href="css/bootstrap-responsive.min.css?v=1"> 
    </head> 
    <body> 
     <div data-ng-controller="MyCtrl"> 
      <span id="added" data-ng-show="added">Added</span> 
      <span id="edited" data-ng-show="edited">Edited</span> 

      <div id="page-content" style="overflow:hidden"> 
      <!--<div id="page-content">--> 
       <div class="employees view"> 
        <button name="addNewEmployee" id="addNewEmployee" class="btn btn-primary" data-ng-click="add()">Add</button> 
        <button name="editEmployee" id="editEmployee" class="btn btn-primary" data-ng-click="edit()">Edit</button> 

        <div data-ng-controller="editCtrl" data-ng-include="'app/views/edit.html'"></div> 
        <div data-ng-controller="addCtrl" data-ng-include="'app/views/add.html'"></div> 
       </div> 
      </div> 

     </div> 

     <!-- JS scripts --> 
     <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> 
     <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.js"></script> 
     <script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script> 
     <script src="//cdnjs.cloudflare.com/ajax/libs/angular-strap/0.7.2/angular-strap.min.js"></script> 
     <script src="app/app.js"></script> 

    </body> 
</html> 
+0

나는 사용하여이에 자신을 몇 가지 조사를했다 [이] (http://www.w3schools.com/cssref/playit.asp?filename=playcss_overflow&preval=hidden). 그리고 내가 생각하는 것은 모달에 대해'overflow : hidden'을 사용하는 것은 모달의 스냅 샷에 캡처 된 것만 렌더링하는 것입니다. 'overflow : hidden '을 사용한다면 정말 프론트 엔드 개발자에게 물어볼 것입니다. – Brian

+0

사용중인 코드도 볼 수 있습니까? 또한 가치 (http://www.w3.org/TR/webdriver/#determining-visibility) – Arran

+0

사실이 버그 [. 공개 설정]를 WebDriver 사양에 대한 특정 부분을 찾고 저뿐만 아니라. 예를 들어 Google지도 또는 다른지도의 경우지도의 요소에 대해 'overflow : hidden' 타일을 모두 가지고 ChromeDriver가 제대로 작동하지만 FirefoxDriver가 NotVisibleException을 발생시킵니다. –

답변

1

: 각도에 익숙하지 않은 당신을 위해, 모든 행함을 추가하거나 편집을 클릭 할 때마다 모달로 HTML 조각을 표시하고, 여기에 라이브 데모를 볼 수 있습니다 코드의 경우 요소의 스타일은 overflow: hidden이 아니어야합니다. (ref) (UPDATE 난 그냥 테이너가 나는에 링크 된 심판의 코드를 업데이트 한 것을 깨달았지만, 원래 2.33 코드는 overflow: hidden 검사를 포함했다는 것을. 그 단지 상정 2.34에 대한 리팩토링되었다.)

그래서 , 유지 보수자가 이것을 반대하지 않는 한, 당신은 SOL입니다. 그러나 유지 관리자가 문제를 발견하게하는 첫 번째 단계는 공식 저장소에 문제를 추가하는 것입니다.

driver.executeScript("arguments[0].setAttribute('style', 'overflow: none;')", page_content_element)

그리고 거기에서 테스트를 실행하려고 : 당신이 개발자가 도움을받을 수없는 경우 그 동안

한 가지 가능한 솔루션은이 오버 플로우 특성을 제거하기 위해 자바 스크립트를 사용하는 것입니다.

+0

감사합니다. 지금 크롬 드라이버를 사용하고 있습니다. 테스트 실행 시간에 그다지 영향을 미치지 않는 것 같습니다. 그런 다음 10 개 밖에 없습니다. 100 명 정도가 될 때마다 다른 드라이버의 속도 비교를 할 것입니다. –