기능 참조

Sofia Emelianova
Sofia Emelianova
GitHub
Jecelyn Yeen

Chrome DevTools Recorder 패널의 종합적인 기능 참조에서 사용자 흐름을 공유하고, 흐름과 단계를 수정하는 방법을 알아보세요.

Recorder 패널 작업의 기본사항을 알아보려면 사용자 플로우 기록, 재생, 측정을 참고하세요.

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

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

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

단축키 표시 버튼

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

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

사용자 플로우 수정

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

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

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

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

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

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

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

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

사용자 플로우 공유

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

사용자 플로우 내보내기

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

  1. 내보내려는 사용자 흐름을 엽니다.

  2. 녹음기 패널 상단의 내보내기를 클릭합니다.

    내보내기 메뉴의 형식 옵션 목록입니다.

  3. 드롭다운 목록에서 다음 형식 중 하나를 선택합니다.

    • JSON 파일 녹음 파일을 JSON 파일로 다운로드합니다.
    • @puppeteer/replay 녹음 파일을 Puppeteer Replay 스크립트로 다운로드합니다.
    • Puppeteer. 녹음 파일을 Puppeteer 스크립트로 다운로드합니다.
    • Puppeteer(Firefox용) 녹화 파일을 Firefox용 Puppeteer 스크립트로 다운로드합니다.
    • Puppeteer(Lighthouse 분석 포함) 녹음 파일을 Lighthouse 분석이 삽입된 Puppeteer 스크립트로 다운로드합니다.
    • 녹음기의 확장 프로그램 내보내기에서 제공하는 옵션 1개 이상

  4. 파일을 저장합니다.

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

  • JSON. 사람이 읽을 수 있는 JSON 객체를 수정하고 JSON 파일을 import로 다시 가져옵니다.
  • @puppeteer/replay. Puppeteer Replay 라이브러리로 스크립트를 재생합니다. @puppeteer/replay 스크립트로 내보낼 때는 단계가 JSON 객체로 유지됩니다. 이 옵션은 CI/CD 파이프라인과 통합하고 싶지만 단계를 JSON으로 수정하고 나중에 변환하여 Recorder로 다시 가져올 수 있는 유연성이 있는 경우에 적합합니다.
  • Puppeteer 스크립트 Puppeteer로 스크립트를 재생합니다. 단계가 JavaScript로 변환되므로 단계를 반복하는 등 더 세부적인 맞춤설정을 할 수 있습니다. 단, 이 스크립트를 Recorder로 다시 가져올 수는 없습니다.
  • Puppeteer (Firefox). WebDriver BiDi 지원의 일부로 이 Puppeteer 스크립트를 Chrome과 Firefox 모두에서 실행할 수 있습니다.

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

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

    # npm i puppeteer lighthouse
node your_export.js

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

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

녹음기 확장 프로그램을 참고하세요.

사용자 플로우 가져오기

사용자 흐름을 가져오려면 다음 안내를 따르세요.

  1. 녹음기 패널 상단의 가져오기파일 업로드 버튼을 클릭합니다. 녹음 파일 가져오기를 탭합니다.
  2. 녹화된 사용자 흐름이 포함된 JSON 파일을 선택합니다.
  3. 다시 플레이하세요.재생 버튼을 클릭하여 가져온 사용자 흐름을 실행합니다.

외부 라이브러리로 다시 재생

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

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

JSON 사용자 흐름을 맞춤 스크립트로 변환합니다.

  • Cypress Chrome Recorder. 이를 사용하여 사용자 흐름 JSON 파일을 Cypress 테스트 스크립트로 변환할 수 있습니다. 실제 동작을 확인하려면 이 데모를 시청하세요.
  • Nightwatch Chrome Recorder 이를 사용하여 사용자 흐름 JSON 파일을 Nightwatch 테스트 스크립트로 변환할 수 있습니다.
  • CodeceptJS Chrome Recorder 이를 사용하여 사용자 흐름 JSON 파일을 CodeceptJS 테스트 스크립트로 변환할 수 있습니다.

JSON 사용자 흐름 재생:

  • Testcafe로 재생 TestCafe를 사용하여 사용자 흐름 JSON 파일을 재생하고 이러한 녹화 파일의 테스트 보고서를 생성할 수 있습니다.
  • Sauce Labs로 재생 saucectl을 사용하여 Sauce Labs에서 JSON 파일을 다시 재생할 수 있습니다.

사용자 흐름 디버그

다른 코드와 마찬가지로 녹화된 사용자 흐름을 디버그해야 하는 경우도 있습니다.

디버깅을 돕기 위해 레코더 패널을 사용하면 재생 속도를 늦추고, 중단점을 설정하고, 실행을 단계별로 살펴보고, 단계와 동시에 다양한 형식의 코드를 검사할 수 있습니다.

재생 속도 늦추기

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

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

재생 속도가 느립니다.

코드 검사

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

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

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

    형식 드롭다운 목록

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

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

중단점 설정 및 단계별 실행

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

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

단계 수정

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

누락된 걸음 수를 추가하고 실수로 기록된 걸음 수를 삭제할 수도 있습니다.

단계 추가

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

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

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

어설션 추가

녹화 중에 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. 드롭다운 메뉴에서 ...로 복사 옵션 중 하나를 선택합니다.

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

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 키워드는 현재 페이지를 참조합니다.
  • assertedEvents는 단일 navigation 이벤트일 수만 있습니다.

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

  • 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 >= | == (기본값) | <=
waitForElement count 선택기로 식별된 요소 수
waitForElement attributes HTML 속성 및 값
waitForElement properties JavaScript 속성 및 JSON의 값
waitForElement visible 부울. 요소가 DOM에 있고 표시되는 경우 true (display: none 또는 visibility: hidden가 없음)입니다.
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. 재생 설정을 클릭하여 제한 시간 상자를 수정할 수 있도록 합니다.

      다시보기 설정

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

    3. 다시 재생합니다.다시 재생을 클릭하여 조정된 기본 제한 시간이 어떻게 작동하는지 확인합니다.

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

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

      제한 시간을 추가합니다.

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

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

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

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

    선택기 이해

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

    새 녹음 구성

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

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

    일반적인 테스트 선택기

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

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

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

    이름이 무작위로 지정된 자동 생성된 CSS 클래스

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

    웹사이트에 다음과 같은 일반적인 테스트 선택기가 정의되어 있으면 녹음기에서 이를 자동으로 감지하여 사용합니다.

    • 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. 테스트에 사용되는 가장 일반적인 속성은 다음과 같습니다.
          • 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 선택기, 즉 중첩된 섀도우 호스트(있는 경우)입니다.
    • 모든 그림자 루트 내의 모든 요소 중 고유한 피어스 선택기입니다.