침팬응 수용 테스트에서 이온 쪽 메뉴 버튼을 클릭 할 수 없습니다.

Question

사이드 메뉴를 열고 로그 아웃 버튼을 클릭하여 사용자를 로그 아웃하는 수용 테스트를 작성하려고합니다. 침팬지는 불평하고있다, Uncaught Error: element not visible. 나는 그게 볼 수 있다는 것을 의미하기 때문이 성공한 browser.click 라인을 가지고, 아직 경우 다음 줄이 표시되지 않은 것을 불평 것을

it('user can log out @watch', function() { 
    //navigates to login form, fills in the form and submits, verifies that we see the hamburger (sidemenu) button. 
    loginUser(ROLE_TYPE_ADMIN); 

    //click the hamburger menu to slide open (reveal) the side menu 
    browser.click("button.ion-navicon"); 

    //wait for animation to finish 
    browser.pause(500); 

    //wait for my login button to be recognized 
    browser.waitForVisible('.mes-chimp-logout'); 

    //click the logout button (never gets this far – Uncaught Error: element not visible) 
    browser.click('.mes-chimp-logout'); 
}); 

그것은 나에게 이상한 : 여기 내 테스트입니다.

다른 어떤 통찰력 : 나는 사이드 메뉴 버튼을 가지고 사이드 메뉴의 외부 전경 내용에 붙여 경우

• , 나는 그것이 외부 클릭
• 전경 만족을 얻을 수 있습니다 사이드 메뉴는 ion-pane입니다. 이 슬라이드를 사용하여 translate3d 스타일을 사용하여 사이드 메뉴를 표시합니다.

로그 아웃 (또는 모든 사이드 메뉴) 버튼을 어떻게 극복 할 수 있습니까?

Answer 1

실제로 셀렉터에 요소가 하나 뿐이라고하더라도 실제로는 두 개가 있습니다. 런타임에서 이오니아 프레임 워크는 이온 사이드 메뉴와 관련하여 모든 것을 복제 한 것 같습니다. 아마도 애니메이션 목적을 위해, 나는 확실하지 않습니다. 모든 복제 된 요소 중 하나는 표시되거나 채워지지 않습니다 (모서리 템플릿 채워지지 않음). 콘솔에서 $('.mes-chimp-logout')을 수행하면 두 요소가 표시됩니다. 좋은 것을 마우스로 가리키면 UI의 버튼이 강조 표시됩니다. 다른 것을 가리키면 아무 것도 강조 표시되지 않으므로 DOM 또는 화면/보이지 않는 어딘가에서 분리됩니다 (WebDriverIO가 보이지 않는 것으로 생각하는 이유 중 하나, 그렇지 않습니다). 나는 이것을 끝내었다.

//get access to the element id of the second (index 1) copy of the element, the one I know is the visible, populated one. 
const logoutBtnElementID = browser.elements('.mes-chimp-logout').value[1].ELEMENT; 

//click it, using the target ID 
browser.elementIdClick(logoutBtnElementID);