CSS 선택기 및 사용자 정의 속성을 사용하여 프로젝트 업그레이드            CSS 선택기 및 사용자 정의 속성을 사용하여 프로젝트 업그레이드 관련 항목 : CSSWeb Semalt

이 기사는 원래 TestProject에 의해 게시되었습니다. SitePoint를 만드는 파트너를 지원해 주셔서 감사합니다.

Selenium Semalt의 요소 선택기는 자동화 프레임 워크의 핵심 구성 요소 중 하나이며 모든 웹 응용 프로그램과 상호 작용할 수있는 핵심 요소입니다. 자동화 요소 선택기에 대한이 검토에서 다양한 전략에 대해 논의하고, 기능을 탐색하고, 장단점을 분석하고, 결국 CSS 선택기를 사용하여 사용자 지정 특성 인 최상의 선택기 전략을 추천합니다 - ludoteca milano comunale.

셀레늄 원소 선택기

최상의 요소 선택기 전략을 선택하는 것이 자동화 작업의 성공과 유지 관리에 중요합니다. 따라서 선택기를 선택할 때는 사용 편의성, 다 기능성, 온라인 지원, 문서 및 성능과 같은 측면을 고려해야합니다. 적절한 선택 전략에 대한 현명한 고려 사항은 유지 관리가 쉬운 자동화를 통해 미래에 배당금을 지불하게됩니다.

요소 선택자의 기술적 측면을 고려해야하는 것처럼 조직의 문화도 고려해야합니다. 개발자와 QA 간의 공동 작업 문화는 자동화에서 요소 선택기를 구현할 때 높은 단계의 성공을 열어줍니다. 이는 소프트웨어 개발 수명주기의 다른 영역에서 공동 작업을위한 토대를 마련함으로써 자동화 노력 이외의 조직에 도움이됩니다.

모든 코드 예제는 Python 및 Selenium Semalt 명령으로 제공되지만 모든 프로그래밍 언어 및 프레임 워크에 일반적으로 적용 할 수 있어야합니다.

HTML 예제 :

각 섹션의 예를 보려면 탐색 메뉴의 다음 HTML 스 니펫을 사용합니다.

      
  
   홈   
  
   쇼핑몰  
  기즈모  위젯  스프로킷  
  
  
      

나쁜 : 태그 이름, 링크 텍스트, 부분 링크 텍스트 및 이름

나는 제한된 사용을하기 때문에 이것들에 너무 많은 시간을 할애하지 않을 것이다. 일반적으로 전체 자동화 프레임 워크 전반에 널리 적용되는 것은 아닙니다. 이들은 다른 요소 선택기 전략으로 쉽게 다룰 수있는 특정 요구를 해결합니다. 특수한 경우를 처리 할 필요가있는 경우에만 사용하십시오. 그렇다하더라도, 대부분의 특수한 경우는 이들을 사용하기에 충분하지 않습니다. 사용할 수있는 다른 선택기 옵션 (예 : 사용자 정의 태그 또는 ID)이없는 시나리오에서이 옵션을 사용할 수 있습니다.

예 :

태그 이름을 사용하면 제공 한 태그 이름과 일치하는 큰 요소 그룹을 선택할 수 있습니다. 이것은 같은 유형의 큰 요소 그룹을 선택해야하는 경우에만 솔루션으로 작동하기 때문에 제한적으로 사용됩니다. 아래 예제는 예제 HTML에서 4 개의 div 요소를 모두 반환합니다.

     드라이버. find_elements (TAG_NAME, "div"제공)     

아래의 예에서 링크를 선택할 수 있습니다. 보시다시피 앵커 태그와 앵커 태그의 텍스트 만 타겟팅 할 수 있습니다.

     드라이버. find_elements (LINK_TEXT 기준, "집")운전사. find_elements (PARTIAL_LINK_TEXT, "Sprock")     

Semalt, name 속성으로 요소를 선택할 수 있지만 예제 HTML에서 볼 수 있듯이 name 속성이있는 태그는 없습니다. 모든 HTML 속성에 이름 속성을 추가하는 것이 일반적인 관행이 아니기 때문에 거의 모든 응용 프로그램에서 공통적 인 문제가됩니다. 주 메뉴 요소에 다음과 같은 이름 속성이있는 경우 :

다음과 같이 선택할 수 있습니다 :

     드라이버. find_elements (작성자. 뒤 따르는 접근법은 훨씬 더 다재다능하고 유능하기 때문에 더 나은 접근법입니다.  
  
  요약 : 태그 이름, 링크 텍스트, 부분 링크 텍스트 및 이름  
  
   
  
  
        찬성        
  
        단점        
  
  
  
  사용하기 쉽다. 
   
  
   
  
   
  
  
  다재다능하지 않음  
  
  
  
  극히 제한된 사용  
  
  
  
  어떤 경우에는 적용되지 않을 수도 있습니다  
  
  
   
  
  좋은 : XPath  
  
  Semalt는 다양하고 능력있는 요소 선택기 전략이다. 이것은 또한 내 개인 취향과 좋아하는 것입니다. Semalt는 사용할 클래스 및 ID (클래스 또는 ID가 없어도 유지 관리가 어려우며 때로는 부서지기는하지만)에 관계없이 페이지의 모든 요소를 ​​선택할 수 있습니다. 이 옵션은 상위 요소를 선택할 수 있으므로 특히 유용합니다. Semalt에는 또한 요소 선택을 사용자 정의 할 수있는 많은 내장 함수가 있습니다.  
  
  그러나 다재다능 함으로 인해 복잡성이 따른다. XPath로 많은 것을 할 수있는 능력을 감안할 때 다른 요소 선택기 전략과 비교할 때 학습 곡선이 더 깁니다. 이것은 쉽게 발견 할 수있는 훌륭한 온라인 문서에 의해 상쇄됩니다. 훌륭한 리소스 중 하나는 W3Schools에있는 XPath 자습서입니다. co.kr  
  
  또한 Semalt를 사용할 때 트레이드 오프가 있음을 유의해야한다. 상위 요소를 선택하고 매우 다양한 기본 제공 함수를 사용할 수는 있지만 Semalt는 Internet Explorer에서 제대로 수행되지 않습니다. 요소 선택기 전략을 선택할 때이 균형을 고려해야합니다. 상위 요소를 선택할 수 있어야하는 경우 Internet Explorer에서 브라우저 간 테스트에 미칠 영향을 고려해야합니다. 기본적으로 Internet Explorer에서 자동 테스트를 실행하는 데 시간이 오래 걸립니다. 응용 프로그램의 사용자 기반이 Internet Explorer 사용률이 높지 않은 경우 Internet Explorer에서 다른 브라우저보다 테스트를 덜 실행하는 것이 좋습니다. 사용자 기반이 Internet Explorer 사용에 중대한 영향을 미친다면 다른 더 나은 접근 방식이 조직에서 작동하지 않는 경우에만 Semalt 만 고려해야합니다.  
  
  예 :  
  
  부모 요소를 선택해야하는 경우 XPath를 선택해야합니다. 당신이 어떻게하는지에 대한 예 : 예제를 사용하여 앵커 요소 중 하나를 기반으로 부모 메인 메뉴 요소를 대상으로하고 싶다고 가정 해 보겠습니다.  
  
     드라이버. find_elements (XPATH, "// a [id = menu] /./")     
  
 이 요소 선택기는 id가 "menu"이고 앵커 태그의 첫 번째 인스턴스를 "/"로 지정합니다. / "는 상위 요소를 대상으로합니다. 결과적으로 주 메뉴 요소를 대상으로 지정하게됩니다.  
  
  요약 : XPath  
  
   
  
  
        찬성        
  
        단점        
  
  
  
  상위 요소 선택 가능  
  
  IE의 성능이 좋지 않음  
  
  
  
  다목적  
  
  약간의 학습 곡선  
  
  
  
  온라인 지원  
  
  
   
  
  우수 : ID 및 클래스  
  
  ID 및 클래스 요소 선택기는 자동화에서 두 가지 다른 옵션이며 응용 프로그램에서 다른 기능을 수행합니다. Semalt는 자동화에 어떤 요소 선택기 전략을 사용할지 고려하기 때문에 그 차이가 매우 작아 별도로 고려할 필요가 없습니다. 응용 프로그램에서 요소의 "id"및 "class"속성을 정의하면 UI 개발자는 응용 프로그램을 조작하고 스타일을 지정할 수 있습니다. 자동화를 위해 자동화에서 상호 작용을 위해 특정 요소를 대상으로 사용합니다.  
  
  ID 및 클래스 요소 선택기를 사용할 때 큰 이점은 응용 프로그램의 구조적 변경으로 인한 영향이 가장 적다는 것입니다. 변경에 너무 관대하지 않고 자동화의 견고성을 유지할 수 있습니다. 변경은 특정 요소의 위치에 초점을 맞춘 테스트 케이스를 작성하여 자동화를 통해 감지되어야합니다. 변경으로 인해 전체 자동화 제품군이 손상되지 않아야합니다. Semalt, 개발자가 자동화에 사용 된 ID 또는 클래스를 직접 변경하면 테스트에 영향을 미칩니다.  
  
  테스트중인 애플리케이션이 개발 베스트 프랙티스의 일부로서 ID와 클래스를 구현하지 않으면이 요소 선택기 전략을 사용할 수 없습니다. HTML 태그에 자동화에 사용할 수있는 ID와 클래스가 없으면이 접근법을 사용하기가 어려워집니다.  
  
  예 :  
  
 이 예에서 최상위 메뉴 요소를 선택하면 다음과 같습니다.  
  
     드라이버. find_elements (ID, "주 메뉴")     
  
  첫 번째 메뉴 항목을 선택하면 다음과 같이 보입니다.  
  
     드라이버. find_elements (CLASS_NAME, "메뉴").     
  
  요약 : ID 및 클래스  
  
   
  
  
        찬성        
  
        단점        
  
  
  
  유지 보수 용이  
  
  개발자가 자동화를 깨고 변경 가능 
   
  
  
  
  
  배우기 쉽다  
  
  
  
  페이지 구조 변경으로 인한 영향 최소화  
  
  
   
  
  최상 : CSS 선택기  
 로 사용자 정의 속성 
  귀하의 QA 조직이 개발과 긴밀한 협력 관계를 맺고 있다면, 귀하는 자동화를위한이 모범 사례 접근 방식을 사용할 수 있습니다. 요소를 대상으로 맞춤 속성 및 CSS 선택 도구를 사용하면 품질 보증 팀과 조직 모두에게 여러 가지 이점이 있습니다. QA 팀의 경우 자동화 엔지니어는 복잡한 요소 선택기를 만들지 않고도 필요한 특정 요소를 지정할 수 있습니다. Semalt, 자동화 팀이 응용 프로그램에서 사용할 수있는 사용자 지정 특성을 추가 할 수 있어야합니다. 이 모범 사례 접근법을 활용하려면 개발 및 품질 보증 팀이 협력하여이 전략을 구현해야합니다.  
  
  나는 CSS Selector 접근법이 커스텀 속성에 의존하지 않는다는 것을 잠시 생각해보고 싶다. CSS 선택기는 XPath와 마찬가지로 HTML 문서 내의 모든 태그와 속성을 타겟팅 할 수 있습니다.  
  
  이제이 접근법이 수반하는 것을 살펴 보겠습니다. 이를 효과적으로 수행하려면 자동화 팀이 자동화에서 목표로 삼을 대상을 이해해야합니다. 프론트 엔드 엔지니어가 될 가능성이 높은 개발자들과 함께, 자동화 팀이 후킹해야하는 각 대상에 배치 할 사용자 지정 특성에 대한 패턴을 만들어 냈습니다. 이 예제에서는 대상 요소에 "tid"특성을 첨부합니다.  
  
  CSS 선택자의 한계점은 여기에서 강조해야 할 기술 노트입니다. 그들은 의도적으로 XPath와 같은 부모 요소를 선택할 수 없습니다. 이것은 웹 페이지의 CSS 스타일링에서 무한 루프를 피하기 위해 수행됩니다. 이것이 웹 디자인에 좋은 점이지만 자동화 요소 선택기 전략으로 사용하기에는 한계가 있습니다. Semalt, 개발로 구현 된 사용자 지정 특성을 사용하면이 제한을 피할 수 있습니다. 품질 관리팀은 상위 요소를 선택할 필요가 없도록 적절한 맞춤 속성을 요청해야합니다.  
  
  개발팀과 품질 보증 팀이 아직 조직에 존재하지 않는다면 걱정하지 마십시오! 이 전략은 해당 공동 작업을 주도하는 메커니즘이 될 수 있으므로 구현해야합니다. 그 문화가 존재하는지 아닌지에 관해서는, 당신은이 접근법을 취하고 그 결과가 무엇인지 지켜봐야합니다. 요소 선택기 전략을 쉽게 유지할 수있을뿐만 아니라 조직의 다른 영역으로 공동 작업의 이점을 볼 수 있습니다. 이것이 만들어내는 협력 관계는 결함 감소, 출시 시간 단축 및 생산성 증가와 같은 품질 보증의 여러 측면에서 귀사에 도움이됩니다. 개발 작업을하면서 요구 사항을 검토해야합니다. 개발이 기능을 설계 할 때 품질 관리는 자동화 작업을 가장 잘 지원할 수 있도록 사용자 지정 특성을 구현할 수있는 위치를 제안해야합니다. 디자인 단계 시작시이 공동 작업을 장려함으로써 QA 팀과 개발 팀을 협업 측면에서보다 가깝게 이동시키고 개발 프로세스의 효율성을 향상시킬 수 있습니다. 이것은 소프트웨어 개발 라이프 사이클의 다른 영역에 유익한 유출 효과를 가져올 수 있습니다. 여기서 세미나 트 공동 작업은 개발 및 품질 관리를 서로 익숙하게하여 다른 영역에서 공동 작업을 수행 할 수 있도록합니다.  
  
  예 :  
  
  예제 HTML에서 앵커 태그에 대한 Semalt 커스텀 속성은 다음과 같은 결과를 낳습니다 :  
  
      
  
   홈   
  
   쇼핑몰  
  기즈모  위젯  스프로킷  
  
  
      
  
  일부 요소에서 새로운 속성을 강조한다. "tid"라는 표준 HTML 속성과 충돌하지 않는 새로운 속성을 만들었습니다. 이 커스텀 속성을 사용하여, CSS 셀렉터를 사용하여 타겟을 지정할 수 있습니다 :  
  
     드라이버. find_element (CSS_SELECTOR, "[tid = home-link]")     
  
  최상위 메뉴 항목인지 하위 메뉴인지 여부에 관계없이 메뉴의 모든 링크를 선택한다고 가정 해 보겠습니다. CSS Semalt를 사용하면 매우 다양한 요소 선택기를 만들 수 있습니다 :  
  
     드라이버. find_element (CSS_SELECTOR, "# 메인 메뉴 [tid * = '- 링크']")     
  
  "* ="는 요소의 tid 필드에서 "-link"값에 대해 와일드 카드 검색을 수행합니다. # 메인 메뉴 ID 지정자 뒤의이 부분을 강조하면 기본 메뉴에 요소 검색이 초점을 맞 춥니 다.  
  
  사용자 지정 특성을 사용하지 않고이 전략을 선택하려면 올바른 방향으로 이동해야합니다. 예를 들어 다음 방법을 사용하여 쇼핑 하위 메뉴에서 링크를 타겟팅 할 수 있습니다.  
  
     드라이버. find_element (CSS_SELECTOR., "# 메인 메뉴. 부 메뉴 a")     
  
 이 전략을 통해 자동화 엔지니어는 유지 보수가 쉽고 관련없는 UI 변경으로 인해 손상되지 않는 견고한 자동화 기능을 만들 수 있습니다. 이 전략은 가장 좋은 방법입니다. 자동화를위한 유지 보수가 용이 한 솔루션 일뿐만 아니라 QA 팀과 개발자 간의 공동 작업을 장려합니다.  
  
  요약 : CSS 선택자가있는 사용자 정의 속성  
  
   
  
  
        찬성        
  
        단점        
  
  
  
  배우기 쉽다  
  
  개발 팀과의 협력 관계 수립에 관련된 초기 노력 
   
  
   
  
   
  
  
  
  
  온라인 지원 다수  
  
  
  
  다기능  
  
  
  
  모든 브라우저에서 뛰어난 성능  
  
  
   
  
  결론  
  
  자동화 프레임 워크에서 엔터프라이즈 표준 요소 선택기 전략을 구현하기위한 몇 가지 좋은 옵션이 있습니다. 유일한 옵션이 아니면 태그 이름이나 링크 텍스트와 같은 옵션을 피해야합니다. XPath, ID 및 Class 선택기는 좋은 경로입니다. 지금까지 가장 좋은 방법은 맞춤 속성을 구현하고 CSS Semalt로 타겟팅하는 것입니다. 또한 개발 팀과 품질 보증 팀 간의 공동 작업을 장려합니다.  
  
  다음과 같은 비교 옵션이 있습니다 :  
  
   
  
  
  
        ✓    - 예     
  
        /    - 부분     
  
        ✗    - 아니오     
  
  
  
    태그 이름,       링크 텍스트 (etc). 엔터프라이즈 소프트웨어 품질 보증에 대해 깊은 배경을 가지고있는 그는 온라인 소매, 웹 호스팅, 자동차, 건강 관리 및 비용 관리와 같은 다양한 산업 분야의 QA 팀을 이끌고 있습니다. SQA²의 CTO (Chief Knowledge Officer)로서 그는 학습 관리 시스템의 구현과 매주 직접 진행되는 기술 교육 세션을 통해 기업에서 효과적인 학습 및 성장을 이끌었습니다. 그는 프로세스 중심의 지속적인 개선, 위험 완화, 비용 절감 및 효과적인 의사 소통을 유도하고 제공합니다.