CSS 선택기를 효과적으로 사용하기

24 Oct 2024
5 읽을 분
기여자

인쇄
공유
어두운
빛

CSS 선택기를 효과적으로 사용하기

업데이트 날짜 24 Oct 2024
5 읽을 분
기여자

인쇄
공유
어두운
빛

기사 요약

이 요약이 도움이 되었나요?

의견을 보내 주셔서 감사합니다.

*이 페이지의 일부는 기계 번역되었습니다.

웹 애플리케이션을 테스트할 때 CSS 선택기를 사용하여 요소를 선택하는 경우가 많습니다.
대부분의 경우 [시나리오] 를 기록하기 위해 Autify 레코더를 사용할 때 CSS 선택기를 인식하지 못할 것입니다. 그러나 [로케이터] 또는 JS 단계 를 사용할 때 CSS 선택기를 작성해야 할 때가 있습니다.

[로케이터] 문서에 설명된 대로 구글 크롬의 개발자 도구를 사용하면 특정 요소에 대한 CSS 선택기를 쉽게 얻을 수 있습니다. 그러나 개발자 도구에서 얻은 CSS 선택기는 [Locator] 또는 [JS Step] 에서 제대로 작동하지 않을 수 있습니다(자세한 내용은 아래에 설명되어 있습니다).

이 문서에서는 CSS 선택기를 선택하는 방법에 대해 알아봅니다.

1. 기본 CSS 선택기

이 섹션에서는 기본 요소를 선택하는 데 가장 일반적으로 사용되는 CSS 선택기에 대해 설명합니다.

1.1 기본 선택기

선택 방법	예시
태그로 선택	div, a
클래스별 선택	.main, .sub
아이디로 선택	#a123, #b456
태그, 클래스, 아이디 조합으로 선택	div#a123.main, a.sub

1.2 자주 사용하는 선택기

선택 방법	예시
자식 요소	.main .sub, div a
즉위 자식 요소	.main > .sub, div > a
첫 번째 자식 요소	div:first-child
마지막 자식 요소	div:last-child
N번째 자식 요소	li:nth-child(n)

1.3 알아두면 좋은 선택기

선택 방법	예시
속성으로 선택	a[href="https://example.com/index.html"], p[class="main"]
부분적으로 일치하는 속성이 있는 요소	a[href="example.com"], p[class="ai"]
처음에 일치하는 속성이 있는 요소	a[href^="https://"], p[class^="ma"]
끝에 일치하는 속성이 있는 요소	a[href="in"]
비활성화 상태	input:disabled, textarea:disabled

1.4 양식과 관련된 선택기

선택 방법	예시
텍스트 입력 필드	input[type="text"]
텍스트 영역	textarea
드롭다운(선택 상자)	select
드롭다운 목록의 n번째 옵션	option:nth-child(n)
체크박스	input[type="checkbox"]
라디오 버튼	input[type="radio"]
확인란 또는 라디오 버튼이 체크됨	input[type="checkbox"]:checked, input[type="radio"]:checked
제출 버튼	input[type="submit"]
비활성화 상태	input[type="text"]:disabled

2. CSS 선택기를 효과적으로 사용하는 방법

CSS 선택기를 사용하면 요소를 선택하는 방법이 두 가지 이상 있을 수 있습니다. 자동화된 테스트에서는 적절한 방법을 선택하는 것이 중요합니다:

사용자의 의도를 반영합니다,
모호함 없이 대상을 식별할 수 있어야 합니다,
간결하고 쉽게 깨지지 않는(페이지 구조 변경에 강함) 방법을 선택해야 합니다.

선택할 수 있는 방법이 두 가지 이상일 때도 마찬가지입니다.

아래에서는 페이지에서 <li>Hello! C2</li> 를 다음과 같은 HTML 구조의 페이지에서 선택하는 CSS 선택기를 작성하는 방법을 살펴봅니다:

<html>
  <body>
    ...
    <div class="aaaaa ccccc">
      ...
      <div id="#bbbbb">
        ...
        <section class="ccccc">
          ...
          <ul>
            <li>Hello！ A1</li>
            <li>Hello！ A2</li>
            <li>Hello！ A3</li>
          </ul>
          <ul>
            <li>Hello！ B1</li>
            <li>Hello！ B2</li>
            <li>Hello！ B3</li>
          </ul>
          <ul>
            <li>Hello！ C1</li>
            <li>Hello！ C2</li>
            <li>Hello！ C3</li>
          </ul>
          ...
        </section>
        ...
      </div>
      ...
    </div>
    ...
  </body>
</html>

HTML 계층 구조는 아래와 같습니다.

2.1. HTML 계층 구조에 따라 모든 직계 부모 요소를 순서대로 선택합니다.

대상 요소의 HTML 계층 구조 순서대로 태그까지 직계 부모 요소를 선택하면 다음과 같이 표시됩니다:

body > div.aaaaa.ccccc > div#bbbbb > section.ccccc > ul:last-child > li:nth-child(2)

이것은 조상 요소와 클래스/ID가 너무 엄격하게 선택되기 때문에 다용도로 사용할 수 없습니다. 웹사이트를 관리할 때 다음과 같은 상황이 발생할 수 있습니다:

클래스/아이디 변경
예: 디자인 변경으로 인해 <div class="aaaaa ccccc">의 스타일이 <div class="aaaaa bbbbb">로 변경되었습니다.
HTML 구조 변경
예시: <li>Hello! C0</li>가 <li>Hello! C2</li> 앞에 추가되어 두 번째 항목이 아닌 세 번째 항목이 되었습니다.

이러한 상황에서는 CSS 선택기가 손상될 가능성이 높으며 더 이상 대상 요소를 선택할 수 없습니다.

2.2. 태그로만 선택

HTML 계층 구조에 따라 모든 직계 부모 요소를 순서대로 선택하는 CSS 선택기를 생각해 봅시다. div> 태그와 <section> 태그의 클래스/ID를 생략하고 요소만 사용하여 선택하면 다음과 같이 표시됩니다:

body > div > div > section > ul:last-child > li:nth-child(2)

이 경우 "div > div > section"은 "HTML 계층 구조와 일치하는 <div> 태그와 <section> 태그"에 대한 조건이 됩니다.

웹사이트의 클래스/ID가 자주 변경되는 경향이 있는 경우 <div> 태그와 <section> 태그의 클래스/ID를 생략하고 요소별로만 선택할 수 있습니다.

2.3. 클래스/아이디로만 선택

클래스/아이디가 있는 요소는 클래스/아이디로만 작성할 수도 있습니다.

HTML 계층 구조에 따라 모든 직계 부모 요소를 순서대로 선택하는 CSS 선택기를 생각해 봅시다. 클래스/아이디가 있는 <div> 태그와 <section> 태그를 클래스/아이디로만 선택하면 다음과 같이 표시됩니다:

body > .aaaaa.ccccc > #bbbbb >.ccccc > ul:last-child > li:nth-child(2)

이 경우 ".aaaaa.ccccc > #bbbbb >.ccccc"는 "HTML 계층 구조와 일치하는 해당 클래스/아이디가 설정된 모든 요소"에 대한 조건입니다.

2.4. 바로 아래 자식 요소 선택

div.aaaaa > section > ul:last-child > li:nth-child(2)

위의 CSS 선택기를 사용하면 <div class="aaaaa">에는 바로 아래에 자식 요소가 될 수 있는 <section> 태그가 없습니다. 따라서 이 CSS 선택기로 선택된 요소가 없습니다.

2.5. 하위 요소 선택

"바로 아래 자식 요소 선택"에서 <div class="aaaa">는 바로 아래에 <section> 태그가 없어서 선택할 요소가 없었습니다. 하지만 "div.aaaaa > 섹션"(바로 아래 자식 요소 선택)을 "div.aaaaa 섹션"(하위 요소 선택)으로 변경하면 <div class="aaaaa">의 하위 요소인 <section> 태그가 생깁니다.

div.aaaaa section > ul:last-child > li:nth-child(2)

위 CSS 선택기에서 대상 요소는 클래스명이 "aaaaa" 인 <div> 태그의 <ul> 하위 요소 중 마지막 <ul> 바로 아래의 두 번째 <li> 요소입니다. 선택된 대상은 <li>Hello! C2</li> 입니다.

2.6. CSS 선택기 단축

위에서 언급했듯이 "HTML 계층 구조에 따라 순서대로 모든 직계 부모 요소 선택"에 표시된 CSS 선택기는 페이지 업데이트로 인해 HTML 구조가 변경되거나 디자인 변경으로 클래스/ID가 변경되는 경우 등 대상 요소를 선택하지 못할 위험이 높습니다.

CSS 선택기를 짧고 단순하게 유지하면 이러한 위험을 줄일 수 있습니다.

CSS 선택기를 사용하여 HTML 계층 구조를 따라 모든 직계 부모 요소를 순서대로 선택해 보겠습니다. 선택 조건에 따라 세분화할 수 있습니다.

body > div.aaaaa.ccccc > div#bbbbb > section.ccccc > ul:last-child > li:nth-child(2)

body > div.aaaaa.ccccc > div#bbbbb > section.ccccc > ul > li
- 대상은 HTML 계층 구조와 일치하는 요소입니다.
ul:last-child
- 대상은 조건 1과 일치하는 <ul> 태그 중 마지막 <ul> 태그입니다.
li:nth-child(2)
- 대상은 조건 1과 일치하는 </li><li> 태그 중 두 번째 <li> 태그입니다.

HTML 계층 구조 1은 대상 요소를 선택할 수 있는 한 단축할 수 있습니다.

예를 들어 <section> 태그가 페이지의 이 부분에만 존재하는 경우 <section>은 이 페이지에서 고유한 요소입니다. 따라서 <section> 태그까지 상위 요소를 선택하는 CSS 선택기가 작동합니다(아래 표시).

section > ul:last-child > li:nth-child(2)

위 선택기의 경우 대상 요소는 <섹션> 바로 아래 자식 <ul> 중 마지막 <ul> 바로 아래 두 번째 <li> 요소입니다. 선택된 대상은 <li>Hello! C2</li> 입니다.

W3C](https://www.w3.org/TR/html51/dom.html#the-id-attribute)는 id 속성의 값이 단일 문서 내에서 고유해야 한다고 권고합니다. 요소에 ID가 있는 경우 페이지 내에서 고유할 가능성이 높습니다.

2.7. CSS 선택기를 너무 짧게 줄이면...

CSS 선택기를 너무 줄이면 대상 요소가 모호해지거나 대상 요소를 선택할 수 없는 경우가 발생할 수 있으므로 주의하세요.

2.7.1. 선택된 대상이 두 개 이상 있는 경우(1)

section > ul > li:nth-child(2)

위 선택기에서 대상 요소는 <section> 바로 아래 자식 <ul> 바로 아래의 두 번째 <li> 요소입니다. 선택된 대상은 <li>Hello! A2</li>, <li>Hello! B2</li>, <li>Hello! C2</li>. 입니다.

2.7.2. 선택한 대상이 둘 이상일 때(2)

section li

위 선택기에서 대상 요소는 **<섹션>의 하위 요소인 <li>**이므로 선택된 대상은 </li><li>Hello! A1</li>, <li>Hello! A2</li>, <li>Hello! A3</li>, <li>Hello! B1</li>, <li>Hello! B2</li>, <li>Hello! B3</li>, <li>Hello! C1</li>, <li>Hello! C2</li>, <li>Hello! C3</li>.

2.7.3. 대상이 존재하지 않음

section > li:nth-child(2)

위 선택기에서 대상 요소는 <섹션> 의 두 번째 바로 아래 자식 요소인 <li>이므로 대상 요소가 없습니다

2.7.4. 의도하지 않은 요소가 선택된 경우

section li:nth-child(2)

위 선택기에서 대상 요소는 <섹션> 의 하위 요소 중 두 번째 <li>입니다. 따라서 대상 요소는 <li>Hello! A2</li> 입니다.

이 문서가 도움이 되었습니까?

What's Next

Autify용 다단계 인증(MFA)

1. 기본 CSS 선택기
2. CSS 선택기를 효과적으로 사용하는 방법