기능 참조

Sofia Emelianova
Sofia Emelianova
GitHub
Jecelyn Yeen

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

Recorder 패널을 사용하는 방법에 관한 기본사항을 알아보려면 사용자 흐름 녹화, 재생, 측정을 참고하세요.

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

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

녹음기에서 바로 모든 바로가기를 나열하는 힌트를 열려면 오른쪽 상단에서 바로가기 표시를 클릭합니다.

단축키 표시 버튼

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

  1. 설정을 탭합니다. 설정 > 바로가기를 엽니다.
  2. 녹음기 섹션으로 스크롤합니다.
  3. 바로가기 맞춤설정의 단계를 따르세요.

사용자 플로우 수정

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

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

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

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

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

  4. 녹음 파일 가져오기파일 업로드 JSON 형식만 가능합니다.

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

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

사용자 플로우 공유

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

사용자 플로우 내보내기

사용자 흐름을 내보내려면 다음 단계를 따르세요.

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

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

  • JSON. 사람이 읽을 수 있는 JSON 객체를 수정하고 JSON 파일을 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 테스트 스크립트로 변환할 수 있습니다. 실제 동작을 확인하려면 이 demo를 시청하세요.
  • Nightwatch Chrome Recorder 이를 사용하여 사용자 흐름 JSON 파일을 Nightwatch 테스트 스크립트로 변환할 수 있습니다.
  • CodeceptJS Chrome Recorder 이를 사용하여 사용자 흐름 JSON 파일을 CodeceptJS 테스트 스크립트로 변환할 수 있습니다.

JSON 사용자 흐름 재생:

를 통해 개인정보처리방침을 정의할 수 있습니다.

사용자 흐름 디버그

다른 코드와 마찬가지로 기록된 사용자 플로우를 디버그해야 하는 경우가 있습니다.

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

재생 속도 느리게

기본적으로 Recorder는 사용자 플로우를 최대한 빨리 재생합니다. 녹음 파일에서 어떤 일이 발생하는지 파악하려면 재생 속도를 느리게 하면 됩니다.

  1. 다시 플레이하세요.Replay(재생) 드롭다운 메뉴를 엽니다.
  2. 재생 속도 옵션 중 하나를 선택합니다. <ph type="x-smartling-placeholder">
      </ph>
    • 보통(기본값)
    • 정체
    • 매우 느림
    • 매우 느림

느린 재생

코드 검사

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

  1. Recorder 패널에서 녹음 파일을 엽니다.
  2. 단계 목록의 오른쪽 상단에 있는 코드 표시를 클릭합니다. <ph type="x-smartling-placeholder">코드 표시 버튼</ph>
  3. Recorder에는 단계와 코드가 나란히 표시됩니다. 단계와 코드를 나란히 표시한 뷰
  4. 단계 위로 마우스를 가져가면 Recorder에서 확장 프로그램에서 제공하는 코드를 포함하여 모든 형식의 해당 코드를 강조 표시합니다.

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

    형식 드롭다운 목록

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

  6. 단계 매개변수 및 값을 수정하여 녹화를 디버그합니다. 코드 보기는 수정할 수 없지만 왼쪽의 단계를 변경하면 그에 따라 업데이트됩니다.

중단점 설정 및 단계별 실행

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

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

단계 수정

녹화 도중과 이후에 옆에 있는 펼치기 버튼을 클릭하면 녹화의 모든 단계를 수정할 수 있습니다.

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

단계 추가

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

단계를 직접 추가하려면 다음 단계를 따르세요.

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

어설션 추가

녹화 중에 HTML 속성 및 JavaScript 속성을 어설션할 수 있습니다. 어설션을 추가하려면 다음 단계를 따르세요.

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

  2. Add assertion을 클릭합니다.

    Add assertion 버튼

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

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

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

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

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

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

다음 동영상을 시청하여 이 워크플로가 작동하는 모습을 확인하세요.

단계 복사

전체 사용자 플로우를 내보내는 대신 하나의 단계를 클립보드에 복사할 수 있습니다.

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

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

JSON, Puppeteer, @puppeteer/replay, 확장 프로그램에서 제공되는 형식 등 다양한 형식으로 단계를 복사할 수 있습니다.

단계 삭제

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

단계를 삭제합니다.

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

설정된 표시 영역과 탐색 단계가 포함된 기록

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

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

구성 단계

단계를 구성하는 방법은 다음과 같습니다.

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

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

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

    단계를 구성합니다.

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

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

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

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

단계 속성

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

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

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

  • frame: 중첩할 수 있는 iframe을 식별하는 0부터 시작하는 색인 배열입니다. 예를 들어 기본 타겟의 두 번째 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 >= | == (기본값) | &lt;=
waitForElement count 선택기로 식별한 요소 수
waitForElement attributes HTML 속성 및 값
waitForElement properties JavaScript 속성 및 JSON의 값
waitForElement visible 부울. 요소가 DOM에 있고 표시되는 경우(display: none 또는 visibility: hidden 없음) true입니다.
waitForElement
waitForExpression		 asserted events 현재는 type: navigation만 가능하지만 제목과 URL을 지정할 수 있습니다.
waitForElement
waitForExpression		 timeout 최대 대기 시간(밀리초)
waitForExpression expression 문제없습니다. true로 확인되는 JavaScript 표현식
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. 재생 설정을 클릭하여 시간 제한 상자를 수정할 수 있도록 합니다.

      다시 재생 설정

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

    3. 다시 플레이하세요.재생을 클릭하여 조정된 기본 시간 제한이 적용되는 모습을 확인합니다.

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

    1. 단계를 펼치고 시간 제한 추가를 클릭합니다.

      제한 시간을 추가합니다.

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

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

    3. 다시 재생합니다.재생을 클릭하여 시간 제한이 적용된 단계를 확인합니다.

    단계에서 시간 초과 재정의를 삭제하려면 옆에 있는 삭제삭제를 탭합니다. 버튼을 클릭합니다.

    선택기 이해

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

    새 녹음 구성

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

    • 녹음할 선택기 유형 체크박스 세트에서 자동으로 감지할 선택기 유형을 선택합니다.

      • 체크박스입니다. CSS. 구문 선택기
      • 체크박스입니다. ARIA. 시맨틱 선택기
      • 체크박스입니다. 텍스트. 가능한 경우 고유한 텍스트가 가장 짧은 선택기
      • 체크박스입니다. XPath. XML 경로 언어를 사용하는 선택자
      • 체크박스입니다. 피어스. CSS와 비슷하지만 Shadow DOM을 관통할 수 있는 선택자.

    일반적인 테스트 선택기

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

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

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

    임의의 이름을 사용하는 자동 생성된 CSS 클래스입니다.

    이러한 경우 data-* 속성을 사용하여 복원력이 더 우수한 테스트를 만들 수 있습니다. 개발자가 자동화에 사용하는 몇 가지 일반적인 data-* 선택기가 이미 있습니다. 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])을 확인합니다.

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

    선택기 우선순위

    Recorder는 맞춤 CSS 선택자 속성을 지정했는지에 따라 다음 순서로 선택기를 찾습니다.

    • 지정된 경우:
      1. 맞춤 CSS 속성이 있는 CSS 선택자입니다.
      2. XPath 선택기입니다.
      3. ARIA 선택기가 있는 경우
      4. 발견된 경우 가장 짧은 고유 텍스트가 있는 선택기입니다.
    • 지정되지 않은 경우:
      1. ARIA 선택기가 있는 경우
      2. 다음과 같은 우선순위가 있는 CSS 선택자:
        1. 테스트에 사용되는 가장 일반적인 속성은 다음과 같습니다. <ph type="x-smartling-placeholder">
            </ph>
          • 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 선택기, 즉 중첩된 섀도우 호스트(있는 경우)입니다.
    • 모든 그림자 루트 내의 모든 요소 중 고유한 피어스 선택기입니다.