Selenium JavaScript error message: "element is not clickable" 해결하기

소개

Selenium을 사용하여 웹 자동화를 수행하다 보면 자주 마주치는 에러 중 하나가 "element is not clickable"입니다. 이 에러는 자바스크립트 코드 내에서 요소가 존재하지만 클릭할 수 없는 상태일 때 발생합니다. 예를 들어, 요소가 다른 요소에 가려져 있거나, 페이지가 아직 완전히 로드되지 않은 경우가 많습니다. 이번 블로그 글에서는 이 에러의 원인을 짚어보고 해결 방법을 제시하겠습니다.

에러 발생 예시 코드

먼저, "element is not clickable" 에러가 발생할 수 있는 간단한 예시 코드를 살펴보겠습니다.

const { Builder, By } = require('selenium-webdriver');

(async function example() {
    let driver = await new Builder().forBrowser('chrome').build();
    try {
        await driver.get('https://example.com');
        // 버튼 클릭 시도
        let button = await driver.findElement(By.id('myButton'));
        await button.click();  // 이곳에서 "element is not clickable" 에러 발생 가능
    } finally {
        await driver.quit();
    }
})();

에러 해결 방법

1. 기다리기: 요소가 클릭 가능해질 때까지 기다리기

첫 번째 해결 방법은 'WebDriverWait'을 사용하여 요소가 클릭 가능해질 때까지 대기하는 것입니다. 이렇게 하면 요소가 준비되기 전에 클릭을 시도하는 것을 방지할 수 있습니다.

const { Builder, By, until } = require('selenium-webdriver');

(async function example() {
    let driver = await new Builder().forBrowser('chrome').build();
    try {
        await driver.get('https://example.com');
        let button = await driver.wait(until.elementIsVisible(driver.findElement(By.id('myButton'))), 10000);
        await button.click();
    } finally {
        await driver.quit();
    }
})();

2. JavaScript로 클릭하기

만약 대기 후에도 여전히 클릭할 수 없다면, JavaScript를 사용하여 클릭하는 방법을 고려해볼 수 있습니다. 이 방법은 요소가 화면에 올바르게 표시되고 있음에도 클릭할 수 없을 때 유용합니다.

const { Builder, By } = require('selenium-webdriver');

(async function example() {
    let driver = await new Builder().forBrowser('chrome').build();
    try {
        await driver.get('https://example.com');
        let button = await driver.findElement(By.id('myButton'));
        
        // JavaScript를 사용하여 클릭
        await driver.executeScript("arguments[0].click();", button);
    } finally {
        await driver.quit();
    }
})();

3. 요소 가리기 확인하기

또 다른 접근 방법은 해당 요소가 다른 요소에 가려져 있는지 확인하는 것입니다. 'getBoundingClientRect()' 함수를 사용하여 요소의 위치를 확인하고, 가려져 있다면 스크롤을 조정할 수도 있습니다.

const { Builder, By } = require('selenium-webdriver');

(async function example() {
    let driver = await new Builder().forBrowser('chrome').build();
    try {
        await driver.get('https://example.com');
        let button = await driver.findElement(By.id('myButton'));

        // 버튼의 위치 확인
        let rect = await driver.executeScript("return arguments[0].getBoundingClientRect();", button);
        
        if (rect.top < 0 && rect.bottom > 0) {
            console.log("버튼이 가려져 있습니다.");
        } else {
            await button.click();
        }
    } finally {
        await driver.quit();
    }
})();

마무리

이번 블로그 글에서는 Selenium에서 자주 발생하는 "element is not clickable" 에러와 그 해결 방법에 대해 알아보았습니다. 기다리기, JavaScript를 사용한 클릭, 요소 가리기 확인 등 다양한 방법을 통해 이 문제를 압도적으로 해결할 수 있습니다. 웹 자동화를 할 때, 각 요소의 상태를 파악하고 적절한 방법을 선택하는 것이 무엇보다 중요합니다. 행운을 빕니다!