집 >웹 프론트엔드 >CSS 튜토리얼 >CSS 선택기 및 사용자 정의 속성으로 프로젝트를 업그레이드하십시오

CSS 선택기 및 사용자 정의 속성으로 프로젝트를 업그레이드하십시오

尊渡假赌尊渡假赌尊渡假赌원래의: 2025-02-16 09:20:37879검색

Upgrade Your Project with CSS Selector and Custom Attributes 이 기사는 원래 TestProject에서 출판되었습니다. Sitepoint를 가능하게 한 파트너를 지원해 주셔서 감사합니다.

셀레늄 웹 드라이버의 요소 선택기는 자동화 프레임 워크의 핵심 구성 요소 중 하나이며 모든 웹 응용 프로그램과 상호 작용하는 키입니다. 자동화 된 요소 선택기에 대한이 검토에서 우리는 다양한 전략에 대해 논의하고, 기능을 탐색하며, 장단점을 평가하며 궁극적으로 CSS 선택기의 사용자 정의 속성과 함께 최고의 선택기 전략을 권장합니다.

키 포인트

셀레늄 웹 드라이버의 요소 선택기는 모든 웹 애플리케이션과 상호 작용하는 데 필수적입니다. 최상의 선택기 전략은 사용 편의성, 다양성, 온라인 지원, 문서 및 성능을 결합하므로 CSS 선택기의 사용자 정의 속성을 결합하는 것입니다.

사용자 정의 속성 및 CSS 선택기를 사용하면 자동화 엔지니어가 복잡한 요소 선택기를 만들지 않고 특정 요소를 찾을 수 있습니다. 그러나이를 위해서는 QA와 개발 팀 간의 협력이 필요합니다. 응용 프로그램에 사용할 수있는 사용자 지정 속성을 추가해야합니다.

XPath는 클래스와 ID를 사용할 수 있는지 여부에 관계없이 페이지의 요소를 선택하는 다목적이고 강력한 요소 선택기 전략입니다. 그러나 XPath는 인터넷 익스플로러에서 성능이 좋지 않습니다.

ID 및 클래스 요소 선택기는 애플리케이션 구조의 변화에 영향을받지 않습니다. 그러나 개발자가 자동화에 사용 된 ID 또는 클래스를 직접 변경하면 테스트에 영향을 미칩니다. 요소 선택기 전략으로서 태그 이름, 링크 텍스트, 부분 링크 텍스트 및 이름의 사용은 제한적이며 자동화 프레임 워크 전체에서 널리 채택되는 것이 좋습니다. 사용자 정의 태그 또는 ID와 같은 추가 선택기 옵션 없이만 사용해야합니다.

셀레늄 요소 선택기

최상의 요소 선택기 전략을 선택하는 것은 자동화 노력의 성공과 유지 보수 용이성에 중요합니다. 따라서 선택기를 선택할 때 사용 편의성, 다양성, 온라인 지원, 문서 및 성능을 고려해야합니다. 올바른 선택기 전략을 신중하게 고려하면 미래에 유지 관리하기 쉬운 자동화로 돈을 지불 할 것입니다.

요소 선택기의 기술적 측면을 고려해야하는 것처럼 조직의 문화를 고려해야합니다. 개발자와 QA 간의 협력 문화는 자동화에서 요소 선택기를 구현할 때 더 높은 수준의 성공을 달성 할 것입니다. 이는 소프트웨어 개발 라이프 사이클의 다른 영역에서 협력을위한 토대를 마련함으로써 조직에 도움이 될뿐만 아니라 자동화 노력 자체를 넘어선 것입니다.

모든 코드 샘플은 Python 및 Selenium Webdriver 명령을 사용하지만 일반적으로 모든 프로그래밍 언어 및 프레임 워크에 적용 할 수 있습니다.

html 예 : 각 섹션의 예제로 다음 내비게이션 메뉴의 HTML 스 니펫을 사용합니다.

나는 그것들이 모두 매우 제한되어 있기 때문에 이것에 많은 시간을 보내지 않을 것입니다. 그들은 종종 자동화 프레임 워크 전체에서 광범위한 채택을위한 좋은 선택이 아닙니다. 다른 요소 선택기 전략을 사용하여 쉽게 해결할 수있는 특정 요구 사항을 해결합니다. 특별한 상황을 처리해야 할 특정 요구가있는 경우에만 사용하십시오. 그럼에도 불구하고, 대부분의 특별한 경우는 이것을 사용하기에 충분하지 않습니다. 사용자 정의 태그 또는 ID와 같은 추가 선택기 옵션을 사용할 수 없습니다.

예 : 태그 이름을 사용하여 제공하는 태그 이름과 일치하는 많은 수의 요소를 모두 선택할 수 있습니다. 동일한 유형의 많은 요소를 선택 해야하는 경우에만 작동하기 때문에 제한된 사용입니다. 다음 예제는 샘플 HTML에서 4 개의 div 요소를 모두 반환합니다.

다음 예제를 사용하여 링크를 선택할 수 있습니다. 보시다시피, 앵커 태그 와이 앵커 태그의 텍스트 만 찾을 수 있습니다.

마지막으로, 이름 속성으로 요소를 선택할 수 있지만 샘플 html에서 볼 수 있듯이 이름 속성이있는 태그가 없습니다. 이것은 거의 모든 응용 프로그램에서 일반적인 문제입니다. 모든 HTML 속성에 이름 속성을 추가하는 것이 매우 일반적이기 때문입니다. 기본 메뉴 요소에 다음과 같은 이름 속성이있는 경우 :

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

<code class="language-html"><div id="main-menu">
  <div class="menu"><a href="https://www.php.cn/link/7878b14e9d762184301b06f3f609ead7">Home</a></div>
  <div class="menu">
<a href="https://www.php.cn/link/f775ec264c01adf8189da19ec86676fe">Shop</a>
    <div class="submenu">
      <a href="https://www.php.cn/link/f775ec264c01adf8189da19ec86676fe/gizmo">Gizmo</a>
      <a href="https://www.php.cn/link/f775ec264c01adf8189da19ec86676fe/widget">Widget</a>
      <a href="https://www.php.cn/link/f775ec264c01adf8189da19ec86676fe/sprocket">Sprocket</a>
    </div>
  </div>
</div></code>

보시다시피, 이러한 요소 선택기 전략은 사용이 제한적입니다. 다음 방법은 더 일반적이며 강력하기 때문에 더 좋습니다.

요약 : 태그 이름, 링크 텍스트, 부분 링크 텍스트 및 이름

<code class="language-python">driver.find_elements(By.TAG_NAME, "div")</code>

프로 단점 사용하기 쉽습니다. 널리 사용되지 않습니다 경우에 따라 매우 제한된 사용이 적용되지 않을 수 있습니다.

<code class="language-python">driver.find_elements(By.LINK_TEXT, "Home")
driver.find_elements(By.PARTIAL_LINK_TEXT, "Sprock")</code>

권장 : xpath

xpath는 다재다능하고 강력한 요소 선택기 전략입니다. 이것은 또한 나의 개인적인 취향과 좋아하는 것입니다. XPath는 클래스와 ID를 사용할 수 있는지 여부에 관계없이 페이지에서 모든 요소를 선택할 수 있습니다 (클래스 나 ID가 없으면 유지하기가 어렵고 때로는 깨지기 쉬운 경우). 이 옵션은 부모 요소를 선택할 수 있기 때문에 특히 일반적입니다. XPath에는 요소 선택을 사용자 정의 할 수있는 많은 내장 기능이 있습니다.

그러나 다양성은 복잡성을 가져옵니다. XPath가 많은 일을 할 수 있다는 점을 감안할 때 학습 곡선은 다른 요소 선택기 전략보다 가파른 것입니다. 이것은 쉽게 찾을 수있는 훌륭한 온라인 문서로 보상 할 수 있습니다. 좋은 리소스는 w3schools.com에있는 xpath 튜토리얼입니다.

<code class="language-html"><div id="main-menu" name="menu"></div></code>

XPath를 사용할 때 트레이드 오프가 있음을 알 수 있습니다. 상위 요소를 선택하고 매우 일반적인 내장 기능을 사용할 수 있지만 XPath는 인터넷 익스플로러에서 제대로 성능이 떨어지지 않습니다. 요소 선택기 전략을 선택할 때는이 트레이드 오프를 고려해야합니다. 상위 요소를 선택할 수 있어야하는 경우 인터넷 익스플로러의 브라우저 테스트에 미치는 영향을 고려해야합니다. 기본적으로 인터넷 익스플로러에서 자동 테스트를 실행하는 데 시간이 더 걸립니다. 응용 프로그램에 인터넷 익스플로러 사용량이 높지 않은 경우 다른 브라우저보다 인터넷 익스플로러에서 덜 테스트를 실행하는 것을 고려할 수 있기 때문에 이것은 좋은 선택입니다. 사용자 기반에 인터넷 익스플로러 사용이 큰 경우 다른 더 나은 방법이 조직에 적합하지 않은 경우에만 XPath를 고려해야합니다.

예 : 부모 요소를 선택 해야하는 경우 XPath를 선택해야합니다. 다음 방법은 다음과 같습니다.이 예를 사용하여 앵커 요소를 기반으로 부모 메인 메뉴 요소를 찾으려고한다고 가정 해 봅시다 :

.

이 요소 선택기는 "메뉴"와 동일한 ID 인 앵커 레이블의 첫 번째 인스턴스를 찾은 다음 "/../"로 부모 요소를 찾습니다. 결과적으로 메인 메뉴 요소를 찾을 수 있습니다.

요약 : xpath

프로 <code class="language-html"><div id="main-menu"> <div class="menu"><a href="https://www.php.cn/link/7878b14e9d762184301b06f3f609ead7">Home</a></div> <div class="menu"> <a href="https://www.php.cn/link/f775ec264c01adf8189da19ec86676fe">Shop</a> <div class="submenu"> <a href="https://www.php.cn/link/f775ec264c01adf8189da19ec86676fe/gizmo">Gizmo</a> <a href="https://www.php.cn/link/f775ec264c01adf8189da19ec86676fe/widget">Widget</a> <a href="https://www.php.cn/link/f775ec264c01adf8189da19ec86676fe/sprocket">Sprocket</a> </div> </div> </div></code>

단점 IE에서 부모 요소를 선택할 수 있습니다 매우 보편적 인 학습 곡선은 약간 가파르게 많은 온라인 지원

권장 : id 및 클래스 ID 및 클래스 요소 선택기는 자동화의 두 가지 다른 옵션이며 응용 프로그램에서 다른 기능을 수행합니다. 그러나 자동화에 사용할 요소 선택 전략을 고려할 때는 거의 다르므로 별도로 고려할 필요가 없습니다. 응용 프로그램에서 요소의 "ID"및 "클래스"속성 (정의 된 경우)을 사용하면 UI 개발자가 응용 프로그램을 조작하고 스타일링 할 수 있습니다. 자동화의 경우 자동화에서 상호 작용하기 위해 특정 요소를 찾는 데 사용합니다. ID 및 클래스 요소 선택기를 사용하는 것 중 하나는 응용 프로그램 구조의 변화에 의해 영향을 가장 적게 받는다는 것입니다. 소수의 요소 및 일부 하위 요소 체인에 의존하는 XPath 또는 CSS 선택기를 작성하고 싶다고 가정 해 봅시다. 새 요소를 추가하여 기능 요청이 체인을 깨뜨릴 때 어떻게됩니까? ID 및 클래스 요소 선택기를 사용할 때는 페이지 구조에 의존하는 대신 특정 요소를 찾을 수 있습니다. 변화에 대해 너무 느슨하지 않고 자동화의 견고성을 유지합니다. 특정 요소 위치에 중점을 둔 테스트 케이스를 만들어 자동화로 변경 사항을 감지해야합니다. 변경 사항이 전체 자동화 제품군을 파괴해서는 안됩니다. 그러나 개발자가 자동화에 사용 된 ID 또는 클래스를 직접 변경하면 테스트에 영향을 미칩니다.

테스트중인 애플리케이션이 개발 모범 사례의 일부로 ID 및 클래스를 구현하지 않으면이 요소 선택기 정책을 사용할 수 없습니다. HTML 태그에 자동화에 사용할 수있는 ID 및 클래스가없는 경우이 방법을 사용하기가 어렵습니다. 예 : 이 예에서는 상단 메뉴 요소를 선택하려면 다음과 같습니다. 첫 번째 메뉴 항목을 선택하려면 다음과 같습니다.

<code class="language-html"><div id="main-menu">
  <div class="menu"><a href="https://www.php.cn/link/7878b14e9d762184301b06f3f609ead7">Home</a></div>
  <div class="menu">
<a href="https://www.php.cn/link/f775ec264c01adf8189da19ec86676fe">Shop</a>
    <div class="submenu">
      <a href="https://www.php.cn/link/f775ec264c01adf8189da19ec86676fe/gizmo">Gizmo</a>
      <a href="https://www.php.cn/link/f775ec264c01adf8189da19ec86676fe/widget">Widget</a>
      <a href="https://www.php.cn/link/f775ec264c01adf8189da19ec86676fe/sprocket">Sprocket</a>
    </div>
  </div>
</div></code>

요약 : id and class
프로
단점 관리하기 쉽게 개발자가 변경되어 자동화를 중단 할 수 있습니다 페이지 구조 변경에 의해 최소한의 영향을 받기 쉬운 최고 : CSS 선택기의 사용자 정의 속성과 결합 QA 조직이 개발 팀과 좋은 협업 관계를 유지하면이 모범 사례 접근 방식을 자동화에서 사용할 수있을 것입니다. 사용자 정의 속성 및 CSS 선택기를 사용하여 요소를 찾으면 QA 팀 및 조직에 여러 가지 이점이 있습니다. QA 팀의 경우 자동화 엔지니어는 복잡한 요소 선택기를 만들지 않고 필요한 특정 요소를 찾을 수 있습니다. 그러나 자동화 팀이 애플리케이션에서 사용할 수있는 사용자 지정 속성을 추가 할 수있는 기능이 필요합니다. 이 모범 사례 접근 방식을 활용하려면 개발 및 QA 팀이 함께 협력 하여이 전략을 구현해야합니다. CSS 선택기 메소드가 사용자 정의 속성에 의존하지 않는다는 점을 잠시 시간을 내고 싶습니다. CSS 선택기는 XPath와 같은 HTML 문서에서 태그와 속성을 찾을 수 있습니다. 이 방법에 포함 된 내용을 봅시다. 이를 위해서는 자동화 팀이 자동화에서 타겟팅하려는 내용을 이해해야합니다. 개발자 (대부분 프론트 엔지니어)와 협력하여 자동화 팀이 연결 해야하는 모든 대상에 배치 할 맞춤형 속성 패턴을 개발할 것입니다. 이 예에서는 'TID'속성을 대상 요소에 추가합니다.
여기서 강조되는 기술적 지점은 CSS 선택기의 한계입니다. 그들은 의도적으로 부모 요소가 XPath처럼 선택되도록 허용하지 않습니다. 이것은 웹 페이지의 CSS 스타일에서 무한 루프를 피하기 위해 수행됩니다. 이것은 웹 디자인에 좋은 것이지만 자동화 된 요소 선택기 전략으로 사용하는 것은 제한입니다. 다행히도이 제한은 개발자가 구현 한 사용자 정의 속성으로 피할 수 있습니다. QA는 상위 요소를 선택할 필요가 없도록 적절한 사용자 정의 속성을 요청해야합니다.
사용자 정의 속성을 사용하지 않고이 정책을 선택하려면 여전히 올바른 길을 가고 있습니다. 예를 들어, 다음 방법을 사용하여 상점 하위 메뉴에서 링크를 찾을 수 있습니다. 이 전략을 통해 자동화 엔지니어는 UI의 관련이없는 변경으로 인해 유지 관리가 쉬우 며 깨지지 않는 신뢰할 수있는 자동화를 만들 수 있습니다. 이 전략을 선택하는 것이 가장 좋은 방법입니다. 유지 관리가 쉬운 자동화 솔루션이 될뿐만 아니라 개발 팀과 QA 팀 간의 협업을 장려 할 것입니다.
예 : 이 예제에서 사용자 정의 속성 구현 HTML은 다음과 같은 결과를 얻을 수 있습니다.
일부 요소의 새로운 속성에 주목하십시오. 우리는 "tid"라는 표준 HTML 속성과 충돌하지 않는 새로운 속성을 만들었습니다. 이 사용자 정의 속성을 사용하면 CSS 선택기를 사용하여 찾을 수 있습니다.
최고의 메뉴 항목이든 하위 메뉴이든 메뉴에서 모든 링크를 선택 하시려고한다고 가정하십시오. CSS 선택기를 사용하면 일반적인 요소 선택기를 만들 수 있습니다.
<code class="language-html"><div id="main-menu"> <div class="menu"><a href="https://www.php.cn/link/7878b14e9d762184301b06f3f609ead7">Home</a></div> <div class="menu"> <a href="https://www.php.cn/link/f775ec264c01adf8189da19ec86676fe">Shop</a> <div class="submenu"> <a href="https://www.php.cn/link/f775ec264c01adf8189da19ec86676fe/gizmo">Gizmo</a> <a href="https://www.php.cn/link/f775ec264c01adf8189da19ec86676fe/widget">Widget</a> <a href="https://www.php.cn/link/f775ec264c01adf8189da19ec86676fe/sprocket">Sprocket</a> </div> </div> </div></code>
"*="의 목적은 모든 요소의 TID 필드에서 "-Link"값에 대한 와일드 카드 검색을 수행하는 것입니다. 메인 메뉴 내에서 요소의 검색 범위에 초점을 맞춘 #Main-Menu ID 지정자 다음에 넣으십시오.
사용자 정의 속성을 사용하지 않고이 정책을 선택하려면 여전히 올바른 길을 가고 있습니다. 예를 들어, 다음 방법을 사용하여 상점 하위 메뉴에서 링크를 찾을 수 있습니다.
이 전략을 통해 자동화 엔지니어는 UI의 관련이없는 변경으로 인해 유지 관리가 쉽고 중단되지 않는 안정적인 자동화를 만들 수 있습니다. 이 전략을 선택하는 것이 가장 좋은 방법입니다. 유지 관리가 쉬운 자동화 솔루션이 될뿐만 아니라 개발 팀과 QA 팀 간의 협업을 장려 할 것입니다.
요약 : CSS 선택기의 사용자 정의 속성과 함께

<code class="language-python">driver.find_elements(By.TAG_NAME, "div")</code>
프로

단점 개발 팀과의 협력 관계를 구축하기위한 초기 노력을 쉽게 배우기 쉽습니다. 많은 온라인 지원 Universal 모든 브라우저에서 탁월한 성능

결론

자동화 프레임 워크에서 엔터프라이즈 표준 요소 선택기 전략을 구현하는 데 좋은 옵션이 있습니다. 태그 이름 또는 링크 텍스트와 같은 옵션은 유일한 옵션이 아닌 한 피해야합니다. XPath, ID 및 클래스 선택기는 좋은 방법입니다. 지금까지 가장 좋은 방법은 사용자 정의 속성을 구현하여 CSS 선택기를 사용하여 찾는 것입니다. 이는 또한 개발 팀과 QA 팀 간의 협력을 장려합니다. 다음은 나란히 비교를위한 옵션입니다 CSS 선택기의 사용자 정의 속성에 대한 FAQS ~~CSS 선택기 사용자 정의 속성이란 무엇입니까?~~

CSS 선택기 사용자 정의 속성은 CSS의 강력한 기능으로 개발자가 속성 값을 기반으로 요소를 선택하고 스타일을 선택할 수 있습니다. 이것은 공개 속성을 공유하지만 동일한 태그 이름이나 클래스를 공유하지 않는 요소에 특정 스타일을 적용하려는 경우에 특히 유용합니다. 예를 들어, 사용자 정의 속성 선택기를 사용하여 태그 이름이나 클래스에 관계없이 "활성"데이터 속성으로 모든 요소를 스타일링 할 수 있습니다. CSS 선택기를 사용하여 속성을 사용자 정의하는 방법은 무엇입니까? CSS 선택기로 속성을 사용자 정의하려면 CSS 선택기에서 사각형 브래킷

를 사용해야합니다. 괄호 안에 선택할 속성과 값을 지정합니다. 예를 들어, "활성"데이터 속성으로 모든 요소를 선택하려면 선택기
를 사용합니다. 그런 다음 원하는 스타일을 이러한 요소에 적용 할 수 있습니다.
속성과 함께 CSS 선택기 사용자 지정 속성을 사용할 수 있습니까?
예, 모든 속성과 함께 CSS 선택기 사용자 지정 속성을 사용할 수 있습니다. 여기에는 "클래스"및 "ID"와 같은 표준 HTML 속성과 요소에 추가 한 사용자 정의 데이터 속성이 포함됩니다.
다른 유형의 CSS 속성 선택기는 무엇입니까?
CSS 속성 선택기에는 여러 유형이 있습니다. 가장 기본적인 유형은 정확한 일치 선택기이며, 속성 값의 정확한 일치를 기반으로 요소를 선택합니다. 시작, 엔딩 또는 속성 값의 일부를 일치시키기위한 셀렉터도 있습니다. 또한 값에 관계없이 특정 속성을 가진 요소를 일치시키는 선택기가 있습니다.
모든 브라우저에 CSS 선택기 사용자 지정 속성을 사용할 수 있습니까?
모든 최신 브라우저 (Chrome, Firefox, Safari 및 Edge 포함)는 CSS 선택기 사용자 정의 특성을 지원합니다. 그러나이 브라우저의 이전 버전 또는 기타 덜 공통 브라우저에서는 지원되지 않을 수 있습니다. 호환성을 위해 여러 브라우저에서 CSS를 테스트하는 것이 가장 좋습니다. [] CSS 선택기 사용자 정의 속성을 사용하여 사이트 성능을 향상시키는 방법은 무엇입니까? [data-active] CSS 선택기 사용자 정의 속성은 작성해야 할 CSS의 양을 줄임으로써 웹 사이트 성능을 향상시키는 데 도움이 될 수 있습니다. 속성을 기반으로 요소를 선택하면 각 요소에 대해 별도의 CSS를 쓰지 않고도 한 번에 여러 요소에 스타일을 적용 할 수 있습니다. 이를 통해 CSS를보다 효율적이고 유지 관리하기 쉽게 만들 수 있습니다.
다른 선택기와 함께 CSS 선택기 사용자 지정 속성을 사용할 수 있습니까?
예, 다른 선택기와 함께 CSS 선택기 사용자 지정 속성을 사용할 수 있습니다. 예를 들어, 클래스 선택기와 함께 사용자 정의 속성 선택기를 사용하여 특정 클래스 및 특정 속성을 가진 요소 만 선택할 수 있습니다.
CSS 선택기의 사용자 정의 속성에 대한 일반적인 사용 사례는 무엇입니까?
CSS 선택기 사용자 정의 속성은 일반적으로 상태 또는 함수를 기반으로 요소를 스타일링하는 데 사용됩니다. 예를 들어, 사용자 정의 속성 선택기를 사용하여 모든 장애인 버튼 또는 필수 폼 필드를 스타일링 할 수 있습니다. 또한 데이터 테마 속성에 따라 다른 스타일을 적용하여 테마 설정에 사용할 수 있습니다.
~~CSS 선택기 사용자 정의 속성은 다른 CSS 선택기와 어떻게 비교됩니까?~~
CSS 선택기 사용자 정의 속성은 다른 많은 CSS 선택기보다 유연성이 더 커집니다. 다른 선택기는 태그 이름, 클래스 또는 ID를 기반으로 요소를 선택하는 것으로 제한되지만 사용자 정의 속성 선택기는 모든 속성에 따라 요소를 선택할 수 있습니다. 따라서 복잡한 웹 페이지를 설정하는 강력한 도구가됩니다.
CSS 선택기를 사용하여 속성을 사용자 정의하는 단점이 있습니까?
CSS 선택기를 사용하여 속성을 사용자 정의 할 수있는 잠재적 인 단점 중 하나는 CSS를보다 복잡하게 만들 수 있다는 것입니다. 많은 수의 사용자 정의 속성 선택기를 사용하는 경우 CSS를 이해하고 유지하기가 어려울 수 있습니다. 그러나 이것은 신중한 계획과 조직으로 완화 될 수 있습니다.

위 내용은 CSS 선택기 및 사용자 정의 속성으로 프로젝트를 업그레이드하십시오의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

Python firefox css chrome safari html edge 循环 class 选择器 ui 自动化

성명：

이전 기사：구성 요소 IO를 사용하여 사용자 정의 구성 요소를 만드는 방법다음 기사：구성 요소 IO를 사용하여 사용자 정의 구성 요소를 만드는 방법