사용자 인터페이스 자동화의 과제: 현재 상태
8517 단어 programmingtesting
이 3부작 블로그 시리즈에서는 UI 자동화의 현재 과제가 어디에 있는지, 어떤 솔루션이 있는지, AI/ML이 향후 이를 해결하는 데 어떻게 도움이 되는지 보여줍니다.
사용자 인터페이스란?
사용자 인터페이스는 사용자가 기계와 상호 작용하는 데 사용하는 모든 것입니다. 현재 세계에서는 일반적으로 터치 기능이나 노트북 키보드처럼 클릭할 수 있는 버튼으로 시각적입니다.
인간 대 컴퓨터 비전
우리의 두뇌는 패턴을 찾는 데 정말 능숙하기 때문에 우리 인간은 시각적 사용자 인터페이스에 요령이 있습니다. 예를 들어 다음 그림을 보십시오.
우리는 그것이 일종의 로그인 양식이고 클릭/탭할 수 있는 버튼이 있다는 것을 즉시 인식합니다. 그런 다음 일종의 대시보드로 리디렉션해야 합니다. 우리의 훌륭한 두뇌 덕분에 그것에 대해 생각할 필요가 없습니다 🥳
이것은 일반적으로 웹 브라우저에서 발생하므로 컴퓨터가 위의 로그인 양식을 표시하는 웹 페이지를 보고 있다고 가정합니다. 컴퓨터가 무엇을 볼 것이라고 생각합니까? 아마도 다음과 같을 것입니다.
http://bioub.github.io/dom-visualizer으로 시각화된 문서 개체 모델(DOM) 트리의 예
여기서 컴퓨터가 문서 개체 모델(DOM)만 보는 이유는 컴퓨터가 웹 사이트가 시각적으로 어떻게 보이는지 볼 방법이나 아이디어가 없기 때문입니다. 따라서 패턴 일치 기능이 부족합니다. 웹 페이지의 구조를 분석하여 브라우저에 표시되는 내용을 이해합니다!
그러나 실제로 DOM은 무엇입니까?
DOM - 문서 객체 모델
DOM은 일반적으로 노드가 있는 트리로 표현되는 구조입니다. HTML에서 파생되었으며 노드를 순회하고 액세스하는 방법이 있습니다.
섀도우 DOM
웹 구성 요소는 웹 구성 요소가 외부 DOM에 영향을 주지 않고 스타일시트가 있는 완전한 DOM 트리를 기존 DOM으로 캡슐화하는 방법입니다.
이를 달성하기 위해 일반 DOM처럼 통과할 수 있는 Shadow DOM을 사용합니다.
자세한 설명은 mdn web docs_을 참조하십시오.
선택기 기반 자동화
시각적 선택기를 사용하는 대신 컴퓨터는 요소를 찾기 위해 두 가지 다른 기술에 의존해야 합니다.
이것이 어떻게 작동하는지 보여주기 위해 먼저 간단한 HTML 페이지를 정의한 다음 결과 DOM에서 요소를 찾기 위해 오늘날 사용되는 두 가지 기술에 대해 논의합니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>A Basic example</title>
</head>
<body>
<div class="container">
<button id="loginButton" type="button" class="login">Login</button>
</div>
</body>
</html>
XPATH로 선택
XPath는 XML에서 요소를 찾기 위해 개발되었습니다. 따라서 XML과 동일한 구조를 가진 HTML은 쿼리가 가능합니다.
로그인 버튼을 찾는 유효한 XPath는 다음과 같습니다.
//button
//*[@id="loginButton"]
/html/body/div/button`
XPath를 더 잘 이해하려면 XPath Cheatsheet 을 사용하십시오.
CSS 선택기
Cascading Style Sheets도 선택기를 사용하며 대부분의 프레임워크는 CSS 선택기를 지원합니다.
버튼에 유효한 CSS 선택자는 다음과 같습니다.
#loginButton /* id selector */
.login /* class selector */
button /* type selector */
CSS 선택기의 장점에 대한 자세한 내용은 this cheatsheet을 참조하십시오.
Git 리포지토리를 가지고 놀아보세요
직접 예제를 보고 코드를 가지고 놀고 싶을 수도 있습니다. 걱정하지 마세요. 인기 있는 Git Repository which contains our example HTML and a test 으로 Cypress testing framework 을(를) 다룰 수 있습니다.
describe('xpath and css selector example spec', () => {
it('finds login button with xpath and css selectors', () => {
cy.visit('../minimalExamplePage.html');
cy.xpath('//button').should('be.visible');
cy.xpath('//*[@id="loginButton"]').should('be.visible');
cy.xpath('/html/body/div/button').should('be.visible');
cy.get('#loginButton').should('be.visible');
cy.get('.login').should('be.visible');
cy.get('button').should('be.visible');
})
})
README의 단계에 따라 Cypress를 시작하고 테스트를 실행하십시오.
결론
브라우저에서 실행되는 애플리케이션에 대한 자동화를 작성하려는 경우 선택할 수 있는 도구가 많이 있습니다. 우리는 cypress이 어떻게 작동하는지 예시로 보여주었습니다.
이 시리즈의 다음 기사에서는 선택자 기반 접근 방식이 가지고 있는 문제와 현재 도구가 이를 해결하기 위해 어떻게 노력하고 있는지 살펴봅니다.
Do you have a favourite tool or are a testautomation enthusiast. Join our Discord community to discuss all things testautomation!
Reference
이 문제에 관하여(사용자 인터페이스 자동화의 과제: 현재 상태), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/askui/challenges-in-user-interface-automation-current-state-38cb텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
