기능 참조

Sofia Emelianova
Sofia Emelianova
GitHub
Jecelyn Yeen

Chrome DevTools Recorder 패널의 포괄적인 기능 참조에서 사용자 플로우를 공유하고 수정하는 방법과 해당 단계를 수정하는 방법을 알아보세요.

Recorder 패널 작업의 기본 사항은 사용자 플로우 녹화, 재생, 측정을 참조하세요.

단축키 알아보기 및 맞춤설정

단축키를 사용하여 녹음기를 더 빠르게 탐색합니다. 기본 단축키 목록은 Recorder 패널 단축키를 참고하세요.

Recorder에서 바로 모든 단축키를 나열하는 힌트를 열려면 오른쪽 상단에서 단축키를 표시합니다. Show shortcuts를 클릭합니다.

바로 가기 표시 버튼입니다.

Recorder 단축키를 맞춤설정하려면 다음 단계를 따르세요.

  1. 설정 페이지. 설정 > 바로가기를 엽니다.
  2. Recorder 섹션까지 아래로 스크롤합니다.
  3. 바로가기 맞춤설정의 단계를 따릅니다.

사용자 플로우 수정

DevTools Recorder 패널의 헤더에는 수정할 사용자 흐름을 선택할 수 있는 드롭다운 메뉴가 있습니다.

Recorder 패널 상단에는 다음 작업을 할 수 있는 옵션이 있습니다.

  1. 새 녹음 추가추가 + 아이콘을 클릭하여 새 녹음을 추가합니다.
  2. 모든 녹화 파일 보기더 펼치세요.. 드롭다운에 저장된 녹음 파일 목록이 표시됩니다. [number] recording(s)(녹음 파일 [number]개) 옵션을 선택하여 저장된 녹음 파일 목록을 펼치고 관리합니다. 모든 녹화 파일 보기

  3. 녹음 파일 내보내기파일 다운로드. 스크립트를 추가로 맞춤설정하거나 버그 신고를 위해 공유하려면 사용자 플로우를 다음 형식 중 하나로 내보내면 됩니다.

    • JSON 파일에서 다운로드할 수 있습니다.
    • @puppeteer/replay 스크립트를 사용하세요.
    • [인형극](/ko/docs/puppeteer/script)
    • Puppeteer (Lighthouse 분석 포함).

    형식에 대한 자세한 내용은 사용자 흐름 내보내기를 참고하세요.

  4. 녹음 파일 가져오기파일 업로드 JSON 형식으로만 제공됩니다.

  5. 녹음 파일 삭제삭제를 탭합니다.. 선택한 녹음 파일을 삭제합니다.

옆에 있는 수정 버튼 수정을 클릭합니다.을 클릭하여 녹화 파일의 이름을 수정할 수도 있습니다.

사용자 플로우 공유

녹음기에서 사용자 플로우를 내보내고 가져올 수 있습니다. 버그를 재현하는 단계의 정확한 기록을 공유할 수 있으므로 버그 신고에 유용합니다. 또한 외부 라이브러리를 통해 내보내고 재생할 수도 있습니다.

사용자 흐름 내보내기

사용자 플로우를 내보내려면 다음 단계를 따르세요.

  1. 내보내려는 사용자 플로우를 엽니다.
  2. Recorder 패널 상단에서 파일 다운로드 Export를 클릭합니다. 내보내기 형식 옵션
  3. 드롭다운 목록에서 다음 형식 중 하나를 선택합니다.
    • JSON 파일. 녹음 파일을 JSON 파일로 다운로드합니다.
    • @puppeteer/replay 녹화 파일을 Puppeteer Replay 스크립트로 다운로드합니다.
    • Puppeteer. 녹화 파일을 Puppeteer 스크립트로 다운로드합니다.
    • Puppeteer (Lighthouse 분석 포함). Lighthouse 분석이 삽입된 Puppeteer 스크립트로 녹화 파일을 다운로드합니다.
    • 녹음기의 확장 프로그램 내보내기에서 제공하는 하나 이상의 옵션입니다.
  4. 파일을 저장합니다.

각 기본 내보내기 옵션으로 다음 작업을 수행할 수 있습니다.

  • JSON. 사람이 읽을 수 있는 JSON 객체를 수정하고 JSON 파일을 Recorder로 다시 import.
  • @puppeteer/replay Puppeteer Replay 라이브러리를 사용하여 스크립트를 다시 재생합니다. @puppeteer/replay 스크립트로 내보내면 단계는 JSON 객체로 유지됩니다. 이 옵션은 CI/CD 파이프라인과 통합하려고 하지만 단계를 JSON으로 수정하고 나중에 변환하여 Recorder로 다시 가져올 수 있는 유연성이 있는 경우에 적합합니다.
  • Puppeteer 스크립트 Puppeteer로 스크립트를 다시 재생합니다. 단계가 자바스크립트로 변환되므로 단계를 반복하는 등 보다 세밀하게 맞춤설정할 수 있습니다. 한 가지 주의할 점은 이 스크립트를 Recorder로 다시 가져올 수 없다는 것입니다.

  • Puppeteer (Lighthouse 분석 포함). 이 내보내기 옵션은 이전 옵션과 동일하지만 Lighthouse 분석을 생성하는 코드가 포함되어 있습니다.

    스크립트를 실행하고 flow.report.html 파일의 출력을 확인합니다.

    # npm i puppeteer lighthouse
node your_export.js

    Chrome에서 Lighthouse 보고서가 열렸습니다.

확장 프로그램을 설치하여 커스텀 형식으로 내보내기

Recorder 확장 프로그램을 참고하세요.

사용자 흐름 가져오기

사용자 플로우를 가져오려면 다음 단계를 따르세요.

  1. Recorder 패널 상단에 있는 Import파일 업로드 버튼을 클릭합니다. 녹음 파일 가져오기
  2. 기록된 사용자 플로우가 포함된 JSON 파일을 선택합니다.
  3. 다시 재생합니다.Replay 버튼을 클릭하여 가져온 사용자 흐름을 실행합니다.

외부 라이브러리로 재생

Puppeteer Replay는 Chrome DevTools팀에서 관리하는 오픈소스 라이브러리입니다. Puppeteer를 기반으로 빌드되었습니다. 명령줄 도구이므로 이 도구로 JSON 파일을 재생할 수 있습니다.

그 외에도 다음과 같은 타사 라이브러리를 사용하여 JSON 파일을 변환하고 재생할 수 있습니다.

JSON 사용자 흐름을 커스텀 스크립트로 변환:

  • Cypress Chrome Recorder: 이 라이브러리를 사용하여 사용자 플로우 JSON 파일을 Cypress 테스트 스크립트로 변환할 수 있습니다. 이 데모에서 실제 동작을 확인하세요.
  • Nightwatch Chrome 녹화기 이 라이브러리를 사용하여 사용자 플로우 JSON 파일을 야간 시청 테스트 스크립트로 변환할 수 있습니다.
  • CodeceptJS Chrome 레코더. 이를 사용하여 사용자 플로우 JSON 파일을 CodeceptJS 테스트 스크립트로 변환할 수 있습니다.

JSON 사용자 플로우 재생:

사용자 플로우 디버그

다른 코드와 마찬가지로 때로는 기록된 사용자 흐름을 디버그해야 합니다.

디버깅에 도움이 되도록 Recorder 패널을 사용하면 재생 속도를 늦추고 중단점을 설정하고 실행을 단계별로 실행하고 다양한 형식의 코드를 단계와 동시에 검사할 수 있습니다.

다시보기 속도 늦추기

기본적으로 Recorder는 사용자 플로우를 최대한 빠르게 재생합니다. 녹화 내용이 어떻게 되는지 이해하려면 재생 속도를 낮추면 됩니다.

  1. 다시 재생합니다.다시보기 드롭다운 메뉴를 엽니다.
  2. 재생 속도 옵션 중 하나를 선택합니다.
    • 보통 (기본값)
    • 정체
    • 매우 느림
    • 매우 느림

느린 다시 재생

코드 검사

다양한 형식으로 사용자 흐름의 코드를 검사하는 방법은 다음과 같습니다.

  1. Recorder 패널에서 녹음 파일을 엽니다.
  2. 단계 목록의 오른쪽 상단에 있는 코드 표시를 클릭합니다. 코드 표시 버튼
  3. Recorder는 단계와 코드를 나란히 표시합니다. 단계와 코드의 나란히 표시된 모습
  4. 단계 위로 마우스를 가져가면 레코더에 확장 프로그램에서 제공한 코드를 비롯한 모든 형식의 코드가 강조표시됩니다.

  5. 형식 드롭다운 목록을 펼쳐 사용자 흐름을 내보내는 데 사용할 형식을 선택합니다.

    형식 드롭다운 목록입니다.

    세 가지 기본 형식 (JSON, @puppeteer/replay, Puppeteer 스크립트 또는 확장 프로그램에서 제공하는 형식) 중 하나일 수 있습니다.

  6. 단계 매개변수 및 값을 수정하여 기록을 디버그합니다. 코드 보기는 수정할 수 없지만 왼쪽 단계를 변경하면 적절하게 업데이트됩니다.

중단점 설정 및 단계별 실행

중단점을 설정하고 단계별로 실행하려면 다음 단계를 따르세요.

  1. 녹음 내 단계 옆에 있는 단계. 원 위로 마우스를 가져갑니다. 원이 중단점 중단점 아이콘으로 바뀝니다.
  2. 중단점 중단점 아이콘을 클릭하고 녹화 파일을 재생합니다. 실행은 중단점에서 일시중지됩니다. 실행이 일시중지되었습니다.
  3. 실행을 단계별로 수행하려면 Recorder 패널 상단의 작업 모음에서 한 단계를 실행합니다. Execute one step 버튼을 클릭합니다.
  4. 재생을 중지하려면 잠시 생각해 보기 재생 취소를 클릭합니다.

단계 수정

녹화 중이나 녹화 후에 옆에 있는 펼치기 버튼을 클릭하여 녹화 내 단계를 수정할 수 있습니다.

누락된 단계를 추가하거나 실수로 기록한 단계를 삭제할 수도 있습니다.

단계 추가

경우에 따라 단계를 직접 추가해야 할 수도 있습니다. 예를 들어 Recorder는 hover 이벤트를 자동으로 캡처하지 않습니다. 이 경우 녹화가 오염되고 이러한 모든 이벤트가 유용하지 않기 때문입니다. 그러나 드롭다운 메뉴와 같은 UI 요소는 hover에만 표시될 수 있습니다. 이러한 요소에 종속된 사용자 흐름에 hover 단계를 수동으로 추가할 수 있습니다.

단계를 수동으로 추가하려면 다음 단계를 따르세요.

  1. 이 데모 페이지를 열고 새 녹화를 시작하세요. 기록을 시작하여 마우스 오버 이벤트를 캡처합니다.
  2. 표시 영역의 요소 위로 마우스를 가져갑니다. 작업 메뉴가 팝업됩니다. 요소 위로 마우스를 가져갑니다.
  3. 메뉴에서 작업을 선택하고 녹화를 종료합니다. Recorder는 클릭 이벤트만 캡처합니다.작업을 클릭하고 녹화 종료
  4. 다시 재생합니다. Replay(재생)를 클릭하여 녹화 파일을 다시 재생해 봅니다. Recorder가 메뉴의 요소에 액세스할 수 없으므로 제한 시간 후 재생이 실패합니다.다시 재생할 수 없습니다.
  5. 클릭 단계 옆에 있는 점 3개로 된 점 3개 버튼 버튼을 클릭하고 앞에 단계 추가를 선택합니다. 클릭 전에 단계를 추가합니다.
  6. 새 단계를 펼칩니다. 기본적으로 waitForElement 유형입니다. type 옆의 값을 클릭하고 hover를 선택합니다. 마우스 오버를 선택합니다.
  7. 다음으로, 새 단계에 적절한 선택기를 설정합니다. 선택을 클릭합니다. 선택을 클릭한 다음 팝업 메뉴 외부에 있는 Hover over me! 요소에서 영역을 클릭합니다. 선택기는 #clickable로 설정됩니다. 선택기를 설정합니다.
  8. 녹화 파일을 다시 재생해 봅니다. 마우스 오버 단계를 추가하면 Recorder가 흐름을 성공적으로 재생합니다. 다시보기가 완료되었습니다.

어설션 추가

기록하는 동안 HTML 속성, 자바스크립트 속성 등을 어설션할 수 있습니다. 어설션을 추가하려면 다음 안내를 따르세요.

  1. 예를 들어 이 데모 페이지에서 녹화를 시작합니다.

  2. Add assertion을 클릭합니다.

    Add assertion 버튼

    Recorder는 구성 가능한 waitForElement 단계를 만듭니다.

  3. 이 단계의 선택기를 지정합니다.

  4. 단계를 구성하되 waitForElement 유형은 변경하지 않습니다. 예를 들어 다음을 지정할 수 있습니다.

    • HTML 속성. 속성 추가를 클릭하고 이 페이지의 요소에 사용되는 속성의 이름과 값을 입력합니다. data-test: <value>를 예로 들 수 있습니다.
    • JavaScript 속성. 속성 추가를 클릭하고 속성 이름과 값을 JSON 형식으로 입력합니다. {".innerText":"<text>"}를 예로 들 수 있습니다.
    • 기타 단계 속성. 예를 들면 다음과 같습니다. visible: true

  5. 사용자 플로우의 나머지 부분을 녹화한 다음 기록을 중지합니다.

  6. 다시 재생합니다. Replay를 클릭합니다. 어설션에 실패하면 제한 시간 후에 Recorder에서 오류를 표시합니다.

다음 동영상에서 이 워크플로를 확인하세요.

단계 복사

전체 사용자 흐름을 내보내는 대신 클립보드에 단일 단계를 복사할 수 있습니다.

  1. 복사할 단계를 마우스 오른쪽 버튼으로 클릭하거나 옆에 있는 점 3개로 된 점 3개로 된 메뉴입니다. 아이콘을 클릭합니다.
  2. 드롭다운 메뉴에서 다른 이름으로 복사 ... 옵션 중 하나를 선택합니다.

드롭다운 메뉴에서 복사 옵션을 선택합니다.

JSON, Puppeteer, @puppeteer/replay 및 extensions에서 제공하는 형식 등 다양한 형식으로 단계를 복사할 수 있습니다.

단계 삭제

실수로 기록한 단계를 삭제하려면 단계를 마우스 오른쪽 버튼으로 클릭하거나 옆에 있는 점 3개 점 3개로 된 메뉴입니다. 아이콘을 클릭하고 단계 삭제를 선택합니다.

단계를 삭제합니다.

또한 녹음기는 모든 녹음 시작 부분에 별도의 두 단계를 자동으로 추가합니다.

설정된 표시 영역 및 탐색 단계가 포함된 기록입니다.

  • 표시 영역 설정 표시 영역의 크기, 배율 및 기타 속성을 제어할 수 있습니다.
  • 탐색. URL을 설정하고 다시 재생할 때마다 페이지를 자동으로 새로고침합니다.

페이지를 새로고침하지 않고 인페이지 자동화를 실행하려면 위에서 설명한 대로 탐색 단계를 삭제하세요.

단계 구성

단계를 구성하려면 다음 안내를 따르세요.

  1. 유형을 지정합니다. click, doubleClick, hover, (입력) change, keyUp, keyDown, scroll, close, navigate (페이지에 연결), waitForElement, waitForExpression, setViewport

    다른 속성은 type 값에 따라 달라집니다.

  2. type 아래에 필수 속성을 지정합니다.

    단계를 구성합니다.

  3. 해당하는 버튼을 클릭하여 선택적 유형별 속성을 추가하고 지정합니다.

사용 가능한 속성 목록은 단계 속성을 참고하세요.

선택적 속성을 삭제하려면 옆에 있는 삭제. Remove 버튼을 클릭합니다.

배열 속성에 요소를 추가하거나 배열 속성에서 삭제하려면 요소 옆의 + 또는 - 버튼을 클릭합니다.

단계 속성

각 단계에는 다음과 같은 선택적 속성이 포함될 수 있습니다.

  • target: Chrome DevTools 프로토콜 (CDP) 대상의 URL이며 기본 main 키워드는 현재 페이지를 참조합니다.
  • 현재 하나의 navigation 이벤트만 될 수 있는 assertedEvents

대부분의 단계 유형에 사용할 수 있는 다른 일반적인 속성은 다음과 같습니다.

  • frame: 중첩될 수 있는 iframe을 식별하는, 0부터 시작하는 색인의 배열 예를 들어 기본 타겟의 두 번째 (1) iframe 내에 있는 첫 번째 (0) iframe을 [1, 0]로 식별할 수 있습니다.
  • timeout: 단계를 실행하기 전에 대기해야 하는 시간(밀리초)입니다. 자세한 내용은 단계 제한 시간 조정을 참고하세요.
  • selectors: 선택기의 배열입니다. 자세한 내용은 선택기 이해를 참고하세요.

유형별 속성은 다음과 같습니다.

유형 속성 필수 설명
click
doubleClick		 offsetX
offsetY		 확인해 보세요. 요소 콘텐츠 상자의 왼쪽 상단 기준(픽셀)
click
doubleClick		 button 포인터 버튼: 기본 | 보조 | 두 번째 | 뒤로 | 앞으로
change value 확인해 보세요. 최종 값
keyDown
keyUp		 key 확인해 보세요. 키 이름
scroll x
y		 절대 스크롤 x 및 y 위치(픽셀), 기본값은 0
navigate url 확인해 보세요. 대상 URL
waitForElement operator >= | == (기본값) | <=
waitForElement count 선택기로 식별된 요소의 수
waitForElement attributes HTML 속성 및 값
waitForElement properties 자바스크립트 속성 및 JSON의 값
waitForElement visible 부울. 요소가 DOM에 있고 표시되는 경우 (display: none 또는 visibility: hidden가 없음) true입니다.
waitForElement
waitForExpression		 asserted events 현재는 type: navigation만 가능하지만 제목과 URL을 지정할 수 있습니다.
waitForElement
waitForExpression		 timeout 최대 대기 시간(밀리초)
waitForExpression expression 확인해 보세요. true로 확인되는 자바스크립트 표현식
setViewport width
height		 확인해 보세요. 표시 영역의 너비 및 높이(픽셀)
setViewport deviceScaleFactor 확인해 보세요. 기기 픽셀 비율 (DPR)과 유사, 기본값 1
setViewport isMobile
hasTouch
isLandscape		 확인해 보세요. 다음을 지정하는 불리언 플래그:
  • 메타 태그 고려
  • 터치 이벤트 지원
  • 가로 모드로 표시
    		•

    재생을 일시중지하는 속성은 두 가지가 있습니다.

    • waitForElement 속성은 선택기로 식별된 여러 요소가 있을 (또는 존재하지 않을지)을 단계를 기다리게 합니다. 예를 들어 다음 단계에서는 .my-class 선택기와 일치하는 요소가 페이지에 3개 미만으로 표시될 때까지 기다립니다.

        "type": "waitForElement",
  "selectors": [".my-class"],
  "operator": "<=",
  "count": 2,

    • waitForExpression 속성은 JavaScript 표현식이 true로 확인될 때까지 단계를 대기합니다. 예를 들어 다음 단계는 2초 동안 일시중지한 후 true로 확인되어 재생을 계속할 수 있습니다.

        "type": "waitForExpression",
  "expression": "new Promise(resolve => setTimeout(() => resolve(true), 2000))",

    걸음 수 제한 시간 조정

    페이지의 네트워크 요청이 느리거나 애니메이션이 긴 경우 기본 시간 제한 5000밀리초를 초과하는 단계에서 재생이 실패할 수 있습니다.

    이러한 문제를 방지하려면 각 단계의 기본 시간 제한을 한 번에 조정하거나 특정 단계에 별도의 시간 제한을 설정할 수 있습니다. 특정 단계의 제한시간은 기본값을 덮어씁니다.

    각 단계의 기본 시간 제한을 한 번에 조정하려면 다음 단계를 따르세요.

    1. Replay settings(재생 설정)를 클릭하여 시간 제한 상자를 수정할 수 있도록 설정합니다.

      설정을 다시 재생합니다.

    2. 시간 제한 상자에 시간 제한 값을 밀리초 단위로 설정합니다.

    3. 다시 재생합니다.다시 재생을 클릭하여 조정된 기본 제한 시간이 실제로 작동하는 것을 볼 수 있습니다.

    특정 단계의 기본 제한 시간을 덮어쓰려면 다음 안내를 따르세요.

    1. 단계를 확장하고 제한 시간 추가를 클릭합니다.

      제한 시간을 추가합니다.

    2. timeout: <value>를 클릭하고 밀리초 단위로 값을 설정합니다.

      제한 시간 값을 설정합니다.

    3. 다시 재생합니다.다시 재생을 클릭하여 시간 제한이 작동하는 단계를 확인합니다.

    단계에서 제한 시간 덮어쓰기를 삭제하려면 옆에 있는 삭제삭제를 탭합니다. 버튼을 클릭합니다.

    선택기 이해

    새 녹화를 시작할 때 다음을 구성할 수 있습니다.

    새 녹화를 구성하는 중입니다.

    • 선택기 속성 텍스트 상자에 맞춤 테스트 속성을 입력합니다. Recorder는 이 속성을 사용하여 공통 테스트 속성 목록 대신 선택기를 감지합니다.

    • 기록할 선택자 유형 체크박스 집합에서 자동으로 감지할 선택자의 유형을 선택합니다.

    일반 테스트 선택기

    간단한 웹페이지의 경우 id 속성과 CSS class 속성만 있으면 Recorder가 선택기를 감지할 수 있습니다. 그러나 다음과 같은 이유로 항상 그런 것은 아닙니다.

    • 웹페이지에서 변경되는 동적 클래스 또는 ID를 사용할 수 있습니다.
    • 코드 또는 프레임워크 변경으로 인해 선택기가 손상될 수 있습니다.

    예를 들어 CSS class 값은 최신 JavaScript 프레임워크 (예: React, Angular, Vue) 및 CSS 프레임워크로 개발된 애플리케이션의 경우 자동 생성될 수 있습니다.

    임의의 이름으로 자동 생성된 CSS 클래스

    이러한 경우 data-* 속성을 사용하여 복원력이 더 우수한 테스트를 만들 수 있습니다. 개발자가 자동화에 사용하는 몇 가지 일반적인 data-* 선택기가 이미 있습니다. Recorder도 이러한 기능을 지원합니다.

    웹사이트에 다음과 같은 일반적인 테스트 선택 도구가 정의되어 있는 경우 Recorder는 이를 자동으로 감지하여 사용합니다.

    • data-testid
    • data-test
    • data-qa
    • data-cy
    • data-test-id
    • data-qa-id
    • data-testing

    예를 들어 이 데모 페이지에서 'Cappuccino' 요소를 검사하고 테스트 속성을 확인합니다.

    테스트 선택기를 정의했습니다.

    'Cappuccino'(카푸치노) 클릭을 녹음하고 녹음에서 해당하는 단계를 펼친 후 감지된 선택기를 확인합니다.

    공통 테스트 선택기가 감지되었습니다.

    녹음 선택기 맞춤설정

    일반적인 테스트 선택기를 사용할 수 없는 경우 녹음 파일 선택기를 맞춤설정할 수 있습니다.

    예를 들어 이 데모 페이지에서는 data-automate 속성을 선택기로 사용합니다. 새 녹음을 시작하고 선택기 속성으로 data-automate를 입력합니다.

    녹음 파일의 선택기를 맞춤설정합니다.

    이메일 주소를 입력하고 선택기 값 ([data-automate=email-address])을 확인합니다.

    맞춤 선택기 선택 결과입니다.

    선택기 우선순위

    레코더는 맞춤 CSS 선택자 속성을 지정했는지 여부에 따라 다음 순서로 선택자를 찾습니다.

    • 지정된 경우:
      1. 맞춤 CSS 속성이 있는 CSS 선택자입니다.
      2. XPath 선택기
      3. ARIA 선택기(있는 경우)
      4. 고유한 텍스트가 가장 짧은 선택자입니다(있는 경우).
    • 지정하지 않은 경우:
      1. ARIA 선택기(있는 경우)
      2. 우선순위가 다음과 같은 CSS 선택자:
        1. 테스트에 사용되는 가장 일반적인 속성은 다음과 같습니다.
          • data-testid
          • data-test
          • data-qa
          • data-cy
          • data-test-id
          • data-qa-id
          • data-testing
        2. ID 속성(예: <div id="some_ID">)
        3. 일반 CSS 선택자
      3. XPath 선택기
      4. 피어 선택기
      5. 고유한 텍스트가 가장 짧은 선택자입니다(있는 경우).

    일반 CSS, XPath 및 Pierce 선택기가 여러 개 있을 수 있습니다. Recorder는 다음을 캡처합니다.

    • 모든 루트 수준의 일반 CSS 및 XPath 선택기(즉, 중첩된 섀도 호스트(있는 경우))
    • 모든 섀도우 루트 내 모든 요소에서 고유한 피어스 선택기.