WebdriverIO의 새로운 접근성 선택기로 앱의 접근성을 유지하고 e2e 테스트를 안정적으로 유지하십시오.

e2e 테스트 내에서 요소를 가져오는 것은 때때로 매우 어려울 수 있습니다. 복잡한 CSS 경로 또는 임의의 테스트 ID로 인해 가독성이 떨어지거나 오류가 발생하기 쉽습니다. 테스트가 실패했을 때 우리가 경험하는 실망은 사람들이 접근성을 염두에 두지 않고 빌드된 애플리케이션에서 스크린 리더와 같은 보조 장치를 사용해야 할 때 경험하는 나쁜 경험과 비교할 수 없습니다.

버전v7.24.0에 도입된 접근성 선택기를 통해 WebdriverIO는 이제 특정 접근성 이름이 포함된 다양한 요소를 가져오는 강력한 방법을 제공합니다. 보조 장치에서 인식하지 못하는 요소에 임의data-testId 속성을 적용하는 대신 개발자 또는 QA 엔지니어는 이제 요소 자체에 올바른 접근성 이름을 적용하거나 개발 팀에 접근성을 개선하도록 요청하여 쓰기 테스트가 쉽게.

WebdriverIO는 내부적으로 xPath 선택기 조건 체인을 사용하여 올바른 요소를 가져옵니다. 프레임워크는 브라우저의 접근성 트리에 액세스할 수 없지만 여기에서 올바른 이름만 추측할 수 있습니다. 접근성 이름은 작성자가 제공한 이름과 콘텐츠 이름을 기반으로 계산되므로 WebdriverIO는 특정 순서에 따라 요소를 가져옵니다.

먼저 유효한 ID를 포함하는 요소를 가리키는 aria-labelledBy 또는 aria-describedBy 속성이 있는 요소를 찾으려고 합니다. 예:

   <h2 id="social">Social Media</h2>
   <nav aria-labelledBy="social">...</nav>

따라서 다음을 통해 탐색 내에서 특정 링크를 가져올 수 있습니다.

   await $('aria/Social Media').$('a=API').click()

그런 다음 특정 aria-label가 있는 요소를 찾습니다. 예:

   <button aria-label="close button">X</button>

X를 사용하여 요소를 가져오거나 테스트 ID 속성을 적용하는 대신 다음과 같이 할 수 있습니다.

   await $('aria/close button').click()

잘 정의된 HTML 양식은 다음과 같이 모든 입력 요소에 레이블을 제공합니다.

   <label for="username">Username</label>
   <input id="username" type="text" />

이제 다음을 통해 입력 값을 설정할 수 있습니다.

   await $('aria/Username').setValue('foobar')

덜 이상적이지만 여전히 작동하는 속성은 placeholder 또는 aria-placeholder 속성입니다.

   <input placeholder="Your Username" type="text" />

이제 요소를 가져오는 데에도 사용할 수 있습니다.

   await $('aria/Your Username').setValue('foobar')

또한 이미지 태그가 특정 대체 텍스트를 제공하는 경우 다음과 같이 해당 요소도 쿼리하는 데 사용할 수 있습니다.

   <img alt="A warm sommer night" src="..." />

이러한 이미지는 이제 다음을 통해 가져올 수 있습니다.

   await $('aria/A warm sommer night').getTagName() // outputs "img"

마지막으로 적절한 접근성 이름을 파생할 수 없는 경우 다음과 같이 누적된 텍스트로 계산됩니다.

   <h1>Welcome!</h1>

이러한 제목 태그는 이제 다음을 통해 가져올 수 있습니다.

   await $('aria/Welcome!').getTagName() // outputs "h1"

보시다시피 요소의 접근성 이름을 정의하는 다양한 방법이 있습니다. 많은 브라우저 디버깅 도구는 요소의 적절한 이름을 찾는 데 도움이 되는 편리한 접근성 기능을 제공합니다.

For more information check out the Chrome DevTools or Firefox Accessibility Inspector docs.

접근성은 포괄적인 웹을 만드는 강력한 도구일 뿐만 아니라 안정적이고 읽기 쉬운 테스트를 작성하는 데도 도움이 됩니다. 계속해서 모든 요소에 aria-label 를 부여해서는 안 되지만, 이 새로운 선택기는 접근성을 염두에 두고 웹 응용 프로그램을 구축하는 데 도움이 될 수 있으므로 나중에 e2e 테스트를 작성하는 것이 훨씬 쉬워집니다.

읽어 주셔서 감사합니다!