JavaScript에서 Selenium을 사용하여 브라우저 테스트를 자동화하는 방법

자동화된 브라우저 테스트는 모든 웹 개발자가 애플리케이션이 올바르게 작동하는지 확인하는 데 필수입니다. 이 게시물에서는 웹페이지 열기 및 버튼 클릭과 같은 간단한 브라우저 작업을 자동화하기 위해 JavaScript로 Selenium을 설정하는 방법을 안내합니다.

전제 조건

계속 진행하려면 다음이 필요합니다.

• Node.js 및 npm가 설치되었습니다.
• Google Chrome 및 ChromeDriver가 설치되었습니다(또는 다른 브라우저 및 해당 드라이버).

1단계: 프로젝트 설정

먼저 프로젝트에 대한 새 폴더를 만듭니다. 터미널을 열고 다음을 실행하세요:

mkdir selenium-test
cd selenium-test

다음으로 새 Node.js 프로젝트를 초기화합니다.

npm init -y

이 명령은 프로젝트의 종속성을 추적하는 package.json 파일을 생성합니다.

2단계: Selenium WebDriver 설치

npm을 사용하여 Selenium WebDriver 및 ChromeDriver를 설치합니다.

npm install selenium-webdriver chromedriver --save

이 패키지는 Selenium으로 Chrome을 자동화하는 데 필요한 라이브러리와 도구를 제공합니다.

3단계: Selenium 스크립트 작성

프로젝트 폴더에 test.js라는 새 파일을 만듭니다. 이 스크립트는 웹페이지를 열고 버튼이 클릭 가능해질 때까지 기다린 다음 클릭합니다.

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

// Helper function to pause the script
function sleep(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

async function runTest() {
  // Configure Chrome to suppress unwanted prompts
  let options = new chrome.Options();
  options.addArguments('--no-default-browser-check', '--no-first-run', '--disable-default-apps', '--disable-infobars');

  let driver = await new Builder()
    .forBrowser('chrome')
    .setChromeOptions(options)
    .build();

  try {
    // Open the target webpage
    await driver.get('https://example.com'); // Change this URL to the site you want to test

    // Wait for an element to load
    await driver.wait(until.elementLocated(By.className('sample-class')), 10000);
    console.log('Found element with class "sample-class".');

    // Generic wait for 6 seconds to handle any dynamic content
    await sleep(6000);

    // Wait for the button to be clickable
    await driver.wait(until.elementLocated(By.id('sample-button')), 10000);

    // Re-locate the button to ensure it’s still in the DOM
    let button = await driver.findElement(By.id('sample-button'));
    console.log('Button located:', button);

    // Click the button
    await button.click();
    console.log('Button clicked successfully.');

    // Wait for the next page or action to load
    await driver.wait(until.urlContains('new-page'), 10000);
    console.log('Navigation to new page was successful.');

  } catch (error) {
    console.error('Error during the test:', error);
  } finally {
    // Always close the browser
    await driver.quit();
  }
}

runTest();

4단계: 스크립트 실행

스크립트를 실행하려면 다음을 실행하세요.

node test.js

Chrome이 열리고 스크립트에 정의된 작업을 수행합니다. 각 단계의 진행 상황을 나타내는 로그를 콘솔에서 확인하세요.

문제 해결

• StaleElementReferenceError: 요소를 찾은 후 DOM이 변경될 때 발생합니다. 이를 방지하려면 항상 요소와 상호 작용하기 직전에 요소를 재배치하세요.
• 시간 초과: 요소를 로드하는 데 시간이 더 오래 걸리면 드라이버.대기()에서 시간 초과를 늘립니다.

결론

이제 Selenium과 JavaScript를 사용하여 자동화된 브라우저 테스트를 위한 기본 설정이 완료되었습니다. 이 설정은 보다 복잡한 상호 작용, 확인 및 검증 단계를 포함하도록 쉽게 확장할 수 있습니다.

브라우저 버전과 일치하도록 드라이버를 업데이트하고 CI/CD 환경에 헤드리스 모드를 사용하는 것을 고려해 보세요.

Azure에서 호스팅하려면 내 다른 게시물을 확인하세요: https://dev.to/iamrule/how-to-azure-host-a-selenium-javascript-node-application-in-azure-and -실패 시 이메일 알림 보내기-2aio

즐거운 테스트를 진행하세요!