이미지를 클릭하는 방법 Selenium 웹드라이버

이미지를 클릭하면 Selenium WebDriver는 아이콘, 로고 또는 썸네일이 탐색 링크 역할을 할 때 흔히 사용되는 도구입니다. 이미지에는 눈에 보이는 텍스트가 없기 때문에 기존의 링크 텍스트 선택기는 작동하지 않으며, 보다 안정적인 선택 전략이 필요합니다.

이미지 링크에 접근하기

이미지 링크는 웹 페이지에서 이미지를 앵커로 사용하는 것으로, 클릭하면 브라우저가 다른 창이나 페이지로 이동합니다.

이미지 링크에는 링크 텍스트가 전혀 없기 때문에 By.linkText() 및 By.partialLinkText() 메서드를 사용할 수 없습니다.

이 경우 By.cssSelector 또는 By.xpath를 사용해야 합니다. 일반적으로 첫 번째 방법이 더 간단하고 가독성이 좋기 때문에 선호됩니다.

아래 예시에서는 페이스북 비밀번호 복구 페이지 왼쪽 상단에 있는 "페이스북" 로고를 클릭하는 방법을 보여드리겠습니다.

우리는 `By.cssSelector`와 요소의 `title` 속성을 사용하여 이미지 링크에 접근할 것입니다. 그런 다음 브라우저가 페이스북 홈페이지로 이동했는지 확인할 것입니다.

Java Code 예시

다음 Selenium WebDriver 코드 조각은 Chrome을 실행하고, 페이스북 비밀번호 복구 페이지를 열고, 페이스북 로고 이미지를 클릭한 후, 결과 페이지 제목을 출력합니다.

package newproject;
import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.chrome.ChromeDriver;

public class MyClass {

    public static void main(String[] args) {
        String baseUrl = "https://www.facebook.com/login/identify?ctx=recover";
        System.setProperty("webdriver.chrome.driver", "G:\\chromedriver.exe");
        WebDriver driver = new ChromeDriver();

        driver.get(baseUrl);
        // click on the "페이스북" logo on the upper left portion
        driver.findElement(By.cssSelector("a[title=\"Go to 페이스북 home\"]")).click();

        // verify that we are now back on 페이스북's homepage
        if (driver.getTitle().equals("페이스북 - log in or sign up")) {
            System.out.println("We are back at 페이스북's homepage");
        } else {
            System.out.println("We are NOT in 페이스북's homepage");
        }
        driver.close();
    }
}

결과

이미지 클릭에 대한 최고의 사례

몇 가지 습관을 들이면 브라우저와 화면 크기에 관계없이 이미지 클릭 자동화 기능이 더욱 안정적으로 작동합니다.

• 중첩된 CSS 경로보다는 title, alt, aria-label 또는 data-*와 같은 안정적인 속성을 사용하는 것이 좋습니다.
• 클릭을 실행하기 전에 ElementToBeClickable에 대한 명시적인 WebDriverWait를 추가하십시오.
• 이미지가 지연 로드되는 경우, 해당 요소를 화면에 표시하려면 스크롤하세요. Javascript먼저 유언집행자부터.
• 투명 오버레이가 클릭을 가로채는 경우, 다른 화면으로 대체합니다. Java스크립트가 하위 요소를 클릭합니다.
• driver.getTitle() 또는 목적지 페이지의 고유 요소를 사용하여 탐색의 유효성을 검사합니다.

인공지능이 이미지 위치 찾기 전략을 개선하는 방법

AI 지원 테스트 도구(예: ...) TestimMabl과 Healenium은 이미지 주변의 DOM을 분석하여 자체 복구 기능을 갖춘 로케이터를 제안합니다. 릴리스 후 클래스 이름이나 속성이 변경되면 프레임워크는 가장 안정적인 대안으로 자동으로 교체하여 아이콘 기반 탐색에서 발생하는 불안정한 오류를 줄입니다.

엔지니어는 ChatGPT 또는 GitHub Copilot을 사용하여 WebDriver 코드 조각을 생성하고, 이미지에 대한 견고한 CSS 또는 XPath 표현식을 제안하고, 클릭 후 로드되는 페이지에 대한 어설션을 작성할 수도 있습니다. 생성된 코드는 정확성 및 대기/오버레이 처리 측면에서 여전히 검토해야 합니다.

맺음말

이미지 링크를 클릭하면 Selenium WebDriver는 안정적인 로케이터를 선택하면 사용하기 쉽습니다. title 또는 alt 속성을 사용하는 `by.cssSelector`가 가장 가독성이 좋은 방법이며, 마크업이 복잡할 때는 `by.xpath`를 사용할 수 있습니다. 또한 명시적인 대기 시간을 설정하면 스크립트 실행 간 안정성을 확보할 수 있습니다.

자주 묻는 질문