Detox로 React-Native WebView를 테스트하는 방법

마침내 Detox를 사용하여 WebView에 대한 종단 간 테스트를 작성할 수 있습니다!

... 어쨌든 Android에서.

현재 iOS는 지원하지 않습니다. 그러나 그것은 미래에 바뀔 가능성이 있습니다. 또한 Android에서 테스트할 수 있는 기능이 있지만 Detox의 문서는 webview 테스트를 포함하도록 공식적으로 업데이트되지 않았습니다. 이것은 작업이 진행 중이고 상당히 조용 할 수 있음을 시사합니다 .

그럼에도 불구하고 Android에서 웹뷰를 테스트할 수 있다는 것은 개발자 입장에서 여전히 큰 도약입니다!

앱에 WebView를 추가하는 방법

WebView를 포함하려면 react-native-webview패키지를 package.json. WebView구성 요소를 가져 오고 아래와 같이 소스를 전달합니다.

testID테스트를 실행할 때 해독을 통해 찾을 수 있도록 WebView 에 포함해야 합니다 .

웹뷰에 대한 테스트를 작성하는 방법

이 예에서는 Twitter 로그인 페이지를 사용하고 있습니다. 사용자가 다음을 수행할 수 있도록 허용합니다.

• 사용자 이름 입력
• 비밀번호를 입력하세요
• 그리고 클릭 로그인 버튼을

때때로 webview가 로드되는 데 시간이 걸리므로 테스트를 실행하기 전에 로드가 완료되도록 지연을 추가하는 것이 유용할 수 있습니다.

아래에서 볼 수 있듯이 Detox의 웹 개체를 사용하여 뷰와 상호 작용하고 찾은 요소에 대해 주장할 수 있습니다.

DOM 요소 찾기:

Detox의 웹 은 Android의 Expresso-Web을 기반으로 하며 DOM 요소를 선택하기 위한 기능 목록을 제공합니다.

• id — id로 DOM 트리에서 요소를 찾습니다.
• text — CSS 클래스로 DOM 트리에서 요소를 찾습니다.
• cssSelector - 주어진 CSS 선택기와 일치하는 DOM 트리에서 요소를 찾습니다.
• name — "name" 속성으로 DOM 트리에서 요소를 찾습니다.
• xpath — XPath로 DOM 트리에서 요소를 찾습니다.
• href— <a>링크 텍스트로 DOM 트리 에서 요소를 찾습니다.
• hrefContent— <a>부분 링크 텍스트로 DOM 트리 에서 요소를 찾습니다.
• tag — 태그 이름으로 DOM 트리에서 요소를 찾습니다.

요소를 찾은 후 다음과 같은 자체 설명 방법을 사용하여 사용자 상호 작용을 시뮬레이션할 수 있습니다.

• tap
• typeText
• getText
• clearText
• replaceText
• scrollToView
• getCurrentUrl
• getTitle
• runScript
• runScriptWithArgs

Detox web은 또한 재미있는 matchers 세트와 함께 제공됩니다.

• toExist()
• toNotExist()
• toHaveText()
• toNotHaveText()

가능성은 무한합니다!