웹 테이블을 처리하는 방법 Selenium

HTML 웹 테이블 읽기

테스터는 HTML 테이블 내부에 있는 요소, 특히 텍스트 값에 접근해야 하는 경우가 많습니다. 하지만 웹 디자이너는 개별 셀에 id나 name 속성을 제공하는 경우가 드물기 때문에, `By.id()`, `By.name()`, `By.cssSelector()`와 같은 메서드는 제대로 작동하지 않는 경우가 많습니다. 이러한 상황에서 가장 신뢰할 수 있는 방법은 `By.xpath()`를 사용하는 것입니다. `By.xpath()`는 테이블 태그 내부의 부모-자식 관계를 탐색하기 때문입니다.

웹 테이블을 처리하는 방법 Selenium

웹 테이블을 처리하려면 아래 HTML 코드를 고려하세요. Selenium.

우리는 xpath "네 번째 셀"이라는 텍스트가 포함된 셀의 내부 텍스트를 가져옵니다.

1단계 – 상위 요소 설정(표)

WebDriver의 XPath 로케이터는 항상 이중 슬래시 "//"로 시작하고 그 뒤에 부모 요소가 옵니다.. 우리는 웹 테이블을 다루고 있기 때문에 Selenium, 상위 요소는 항상 꼬리표. 우리의 첫 번째 부분 Selenium 따라서 XPath 테이블 로케이터는 "//table"로 시작해야 합니다.

2단계 - 하위 요소 추가

바로 아래에 있는 요소 ~이다 , 그래서 는 ~의 자녀이다 반대로, 는 의 부모입니다. XPath에서 모든 자식 요소는 아래와 같이 슬래시(/) 하나로 구분되어 부모 요소의 오른쪽에 배치됩니다.

3단계 - 조건자 추가

그만큼 요소에는 두 개가 포함되어 있습니다. 태그. 이 두 개 태그는 하위 항목입니다. , 그래서 둘 다의 부모입니다. 요소들은 형제자매 관계입니다. 형제자매는 같은 부모를 공유하는 자식 요소입니다..

도달하려면 "네 번째 셀"을 포함하는 해당 셀에 접근하려면 먼저 다음 항목에 접근해야 합니다. 초 첫 번째가 아닙니다. "//table/tbody/tr"만 작성하면 첫 번째 항목을 대상으로 합니다. 꼬리표.

그렇다면 두 번째에 어떻게 접근할 수 있을까요? 답은 사용하는 것입니다. 술어. 술어는 대괄호 "[ ]"로 묶인 숫자 또는 HTML 속성으로, 자식 요소를 형제 요소와 구분하는 역할을 합니다.우리가 필요한 행은 두 번째 행이므로 술어로 "[2]"를 사용합니다.

조건자를 생략하면 XPath는 첫 번째 형제 요소를 반환합니다. 따라서 아래의 XPath 코드 중 어느 것을 사용하더라도 첫 번째 요소에 도달하게 됩니다. .

4단계 - 적절한 조건자를 사용하여 후속 하위 요소 추가

다음으로 필요한 요소는 두 번째입니다. 2단계와 3단계의 규칙을 적용하면 아래와 같은 XPath를 얻습니다.

이제 올바른 XPath 로케이터를 얻었으므로 아래 코드를 사용하여 셀에 접근하고 내부 텍스트를 읽을 수 있습니다. 이 코드는 HTML 페이지를 C 드라이브에 "newhtml.html"이라는 이름으로 저장했다고 가정합니다.

public static void main(String[] args) {
    String baseUrl = "https://demo.guru99.com/test/write-xpath-table.html";
    WebDriver driver = new FirefoxDriver();

    driver.get(baseUrl);
    String innerText = driver.findElement(
        By.xpath("//table/tbody/tr[2]/td[2]")).getText();
    System.out.println(innerText);
    driver.quit();
}

중첩 테이블에 액세스

중첩 테이블에도 동일한 원칙이 적용됩니다. 중첩 테이블은 다른 테이블 안에 테이블이 있는 형태입니다.. 아래에 예가 나와 있습니다.

이전 섹션에서 설명한 부모/자식 및 조건자 개념을 사용하여 "4-5-6" 텍스트가 있는 셀에 접근하려면 아래와 같은 XPath를 작성할 수 있습니다.

아래 WebDriver 코드는 대상 셀의 내부 텍스트를 가져옵니다.

public static void main(String[] args) {
    String baseUrl = "https://demo.guru99.com/test/accessing-nested-table.html";
    WebDriver driver = new FirefoxDriver();

    driver.get(baseUrl);
    String innerText = driver.findElement(
        By.xpath("//table/tbody/tr[2]/td[2]/table/tbody/tr/td[2]")).getText();
    System.out.println(innerText);
    driver.quit();
}

아래 출력은 내부 테이블에 성공적으로 액세스되었음을 확인합니다.

속성을 조건자로 사용

만약 해당 요소가 HTML 깊숙한 곳에 위치하여 형제 요소를 세는 것이 어렵다면, 그 대신 해당 요소의 고유 속성을 사용할 수 있습니다.

아래 예시에서 "뉴욕에서 시카고까지" 셀은 깊숙이 숨겨져 있습니다. Mercury 투어 홈페이지.

테이블의 고유 속성(width="270")을 조건자로 사용할 수 있습니다. 속성은 앞에 @ 기호를 붙여서 조건자로 사용됩니다.위 예시에서 "뉴욕에서 시카고까지" 셀은 첫 번째 셀에 위치해 있습니다. 네 번째의 그러므로 우리의 XPath는 아래와 같아야 합니다.

XPath를 안에 넣을 때는 이 점을 기억하세요. Java"270"을 둘러싼 큰따옴표를 백슬래시로 이스케이프 처리하여 By.xpath() 문자열이 조기에 종료되지 않도록 합니다.

이제 아래 코드를 사용하여 해당 셀에 액세스할 준비가 되었습니다.

public static void main(String[] args) {
    String baseUrl = "https://demo.guru99.com/test/newtours/";
    WebDriver driver = new FirefoxDriver();

    driver.get(baseUrl);
    String innerText = driver.findElement(By
        .xpath("//table[@width=\"270\"]/tbody/tr[4]/td"))
        .getText();
    System.out.println(innerText);
    driver.quit();
}

바로 가기: Inspect 요소를 사용하여 테이블에 액세스 Selenium

요소의 인덱스나 속성을 얻기 어려운 경우, XPath를 생성하는 가장 빠른 방법은 최신 브라우저 개발자 도구의 요소 검사를 사용하는 것입니다.

아래 예시를 살펴보세요. Mercury 투어 홈페이지.

1단계

대상 셀을 마우스 오른쪽 버튼으로 클릭하고 '검사'를 선택하여 DOM 경로를 확인한 다음 전체 XPath를 복사합니다.

2단계

첫 번째 "테이블" 상위 요소를 찾아 그 왼쪽에 있는 모든 항목을 삭제합니다.

3단계

나머지 XPath 앞에 이중 슬래시(//)를 붙이고 웹드라이버 코드에 복사하여 붙여넣으세요.

아래 WebDriver 코드는 깊게 중첩된 요소의 내부 텍스트를 가져옵니다.

public static void main(String[] args) {
    String baseUrl = "https://demo.guru99.com/test/newtours/";
    WebDriver driver = new FirefoxDriver();

    driver.get(baseUrl);
    String innerText = driver.findElement(By
        .xpath("//table/tbody/tr/td[2]"
        + "//table/tbody/tr[4]/td/"
        + "table/tbody/tr/td[2]/"
        + "table/tbody/tr[2]/td[1]/"
        + "table[2]/tbody/tr[3]/td[2]/font"))
        .getText();
    System.out.println(innerText);
    driver.quit();
}

동적 웹 테이블에서 행과 열의 개수를 세는 방법

대시보드나 검색 결과와 같은 동적 웹 테이블은 로드할 때마다 다른 수의 행을 표시합니다. 이를 처리하려면 다음을 사용하십시오. findElements 모든 것을 가져오기 위해 리스트로 변환한 다음, 반복문을 통해 각 셀을 읽습니다. 아래 코드 조각은 ID가 "customers"인 테이블의 행 수를 세고 모든 셀을 읽습니다.

List<WebElement> rows = driver.findElements(
    By.xpath("//table[@id='customers']//tr"));
System.out.println("Total rows: " + rows.size());

for (int i = 1; i <= rows.size(); i++) {
    List<WebElement> cells = driver.findElements(
        By.xpath("//table[@id='customers']//tr[" + i + "]/td"));
    for (WebElement cell : cells) {
        System.out.println(cell.getText());
    }
}

위치 추적기를 감싸십시오 WebDriverWait 과 visibilityOfAllElementsLocatedBy 테이블이 AJAX로 로드될 때 발생합니다. 이는 렌더링 속도가 느린 그리드에서 오래된 요소 참조가 발생하는 것을 방지합니다.

Selenium 웹 테이블을 위한 4가지 상대 위치 지정자

Selenium 4번째 버전에서는 시각적 위치를 기준으로 요소를 대상으로 하는 상대 로케이터가 도입되었습니다. 이는 행 순서가 변경되어 XPath 인덱스가 제대로 작동하지 않을 때 유용합니다. 해당 메서드는 다음과 같습니다. above(), below(), toLeftOf(), toRightOf()예산 및 near() 모두 앵커 웹 요소를 허용합니다.

import static org.openqa.selenium.support.locators.RelativeLocator.with;

WebElement emailHeader = driver.findElement(By.xpath("//th[text()='Email']"));
WebElement emailCell = driver.findElement(
    with(By.tagName("td")).below(emailHeader));
System.out.println(emailCell.getText());

상대 위치 지정자는 열 순서가 바뀌어도 가독성을 유지합니다. 데이터 기반 페이지에서 최상의 결과를 얻으려면 상대 위치 지정자와 명시적 대기 함수를 함께 사용하세요.

동적 웹 테이블 처리를 위한 AI 도구

AI 기반 테스트 플랫폼은 자주 변경되는 그리드에서 위치 추적기 유지 관리를 줄여줍니다. 다음과 같은 도구들이 있습니다. Testim, 마블예산 및 기능화 컴퓨터 비전과 DOM 모델을 사용하여 열 이동 및 자체 복구 로케이터를 감지합니다. 고정된 XPath 인덱스 대신 헤더 텍스트와 셀 유사성을 기반으로 행을 식별합니다.

순수한 Selenium 프로젝트, 라이브러리 등 힐레니움 WebDriver를 래핑하고 런타임에 손상된 로케이터를 다시 작성합니다. 이러한 도구를 WebDriverWait와 함께 사용하면 UI 변경 후 매번 선택기를 다시 작성하지 않고도 동적 테이블 스크립트를 안정적으로 유지할 수 있습니다.

제품 개요

• By.xpath()는 웹 테이블의 셀에 접근하는 가장 확실한 방법입니다. Selenium.
• 형제 요소를 세기 어려운 경우, @ 기호를 앞에 붙여 고유 속성을 조건자로 사용하세요.
• findElements는 List를 반환합니다. 동적 테이블에서 행 개수 계산을 지원합니다.
• Selenium 4개의 상대 위치 지정자(위, 아래, 근처)는 위치 기반 XPath에 대한 의존성을 줄입니다.
• 개발자 도구의 요소 검사 기능을 사용하면 깊숙이 숨겨진 셀에 대한 XPath 생성 속도가 향상됩니다.
• AI 도구 등 TestimMabl 및 Healenium은 그리드 변경을 위한 자체 복구 위치 찾기 도구입니다.

자주 묻는 질문