테스트 실습 Javascript2[Elice]

Posted Apr 9, 2025 Updated Apr 15, 2025

9 min read

Selenium 활용

페이지 이동 및 내용 확인

지시사항

selenium-webdriver에서 Builder를 require 합니다.
async 함수를 정의합니다.
try 블록 안에서 new Builder().forBrowser(‘firefox’).build();를 사용하여 드라이버 인스턴스를 생성하고 await 합니다.
await driver.get();을 사용하여 http://127.0.0.1:8080/index.html 로 이동합니다.
await driver.getTitle();을 사용하여 페이지 제목을 가져옵니다.
가져온 페이지 제목을 지정된 형식으로 출력합니다.
finally 블록 안에서 await driver.quit();를 호출하여 브라우저를 종료합니다.

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

const LOCAL_URL = 'http://127.0.0.1:8080/index.html';

async function runTest() {
  let driver;

  try {
    // TODO 1: Firefox 브라우저용 드라이버 인스턴스를 생성하고 await 하세요.
    driver = await new Builder().forBreowser('firefox').build(); // 지시사항대로 사용해 드라이버 인스턴스 생성후 await  

    // TODO 2: LOCAL_URL 변수에 지정된 로컬 테스트 페이지로 이동하고 await 하세요.
    await driver.get(LOCAL_URL); // 셀레니움 으로 웹 드라이브 쓸때 기억!!

    // TODO 3: 현재 페이지의 제목(getTitle() 메서드)을 가져오고 await 하세요.
    leg pageTitle = await driver.getTitle();

    console.log(`페이지 제목: ${pageTitle}`);

  } finally {
    if (driver) {
      await driver.quit();
    }
  }
}

runTest();

ID 이용 요소 찾기 및 속성 값 확인

지시사항

Builder와 By를 require 합니다.
async 함수 내에서 Firefox 드라이버를 실행하고 로컬 페이지로 이동합니다.
await driver.findElement();와 By.id()를 사용하여 ID가 testButton인 요소를 찾습니다.
찾은 요소의 getText(); 메서드를 await 하여 버튼의 텍스트를 가져옵니다.

  
const { Builder, By } = require('selenium-webdriver'); // By 임포트

const LOCAL_URL = 'http://127.0.0.1:8080/index.html';

async function runTest() {
  let driver;
  try {
    driver = await new Builder().forBrowser('firefox').build();
    await driver.get(LOCAL_URL);

    // TODO 1: ID를 사용하여 ID가 'testButton'인 요소를 찾고 await 하세요. (By.id 사용)
    let buttonElement = await driver.findElement(By.Id("testButton")); // 셀레니움 쓰듯이 똑같이 단.. await 하랬으니

    // TODO 2: 찾은 버튼 요소의 텍스트 내용(getText() 메서드)을 가져오고 await 하세요.
    let buttonText = await buttonElement.getText();

    console.log(`버튼 텍스트: ${buttonText}`);

  } finally {
    if (driver) {
      await driver.quit();
    }
  }
}

runTest();

태그 이름으로 요소 찾기 및 속성 값 확인

지시사항

Builder와 By를 require 합니다.
async 함수 내에서 Firefox 드라이버를 실행하고 로컬 페이지로 이동합니다.
await driver.findElement()와 By.tagName()을 사용하여 첫 번째 input 태그 요소를 찾습니다.
찾은 요소의 getAttribute() 메서드를 await 하여 placeholder 속성의 값을 가져옵니다.

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

const LOCAL_URL = 'http://127.0.0.1:8080/index.html';

async function runTest() {
  let driver;
  try {
    driver = await new Builder().forBrowser('firefox').build();
    await driver.get(LOCAL_URL);

    // TODO 1: 태그 이름을 사용하여 'input' 태그를 가진 첫 번째 요소를 찾고 await 하세요. (By.tagName 사용)
    let inputElement = await driver.findElement(By.tagName("input));

    // TODO 2: 찾은 input 요소의 'placeholder' 속성값을 가져오고 await 하세요. (getAttribute() 메서드 사용)
    let placeholderValue = await inputElement.getAttribute('placeholder');

    console.log(`Input Placeholder 값: ${placeholderValue}`);

  } finally {
    if (driver) {
      await driver.quit();
    }
  }
}

runTest();

명시적 대기 (ExplicitWait) 사용

지시사항

Builder, By, until을 require 합니다.
async 함수 내에서 Firefox 드라이버를 실행하고 로컬 페이지로 이동합니다.
await driver.wait();를 사용하여 h1 태그 요소가 DOM에 로드될 때까지(located) 최대 10초(10000ms) 동안 기다립니다. until.elementLocated(); 조건과 By.tagName(‘h1’) 로케이터를 사용합니다.
wait() 메서드는 대기 후 찾은 요소를 반환하므로, 이 요소를 변수에 저장합니다.
찾은 h1 요소의 getText() 메서드를 await 하여 텍스트를 가져옵니다.
try…finally로 드라이버 종료를 보장하고, try…catch (JavaScript에서는 try 블록 내 await 실패 시 catch로 잡을 수 있음) 또는 Promise의 .catch()를 사용하여 오류 처리도 고려할 수 있습니다 (여기서는 간단히 try…finally 사용)

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

const LOCAL_URL = 'http://127.0.0.1:8080/index.html';
const TIMEOUT = 10000; // 대기 시간 (밀리초)

async function runTest() {
  let driver;
  try {
    driver = await new Builder().forBrowser('firefox').build();
    await driver.get(LOCAL_URL);

    /* 
    TODO 1: 'h1' 태그 요소가 DOM에 위치할 때까지(elementLocated) 최대 TIMEOUT 시간 동안 기다리고,
        찾은 요소를 h1Element 변수에 저장하세요.
        driver.wait()와 until.elementLocated(), By.tagName()을 사용합니다.
    */  
    let h1Element = await driver.wait(until.elementLocated(By.tagName("h1")),TIMEOUT);  
     



    // TODO 2: 기다려서 찾은 h1 요소의 텍스트 내용(getText() 메서드)을 가져오고 await 하세요.
    let h1Text = await h1Element.getText();


    console.log(`H1 텍스트 (대기 후): ${h1Text}`);

  } catch (error) {
     console.error("요소를 찾는 중 오류 발생:", error);
  } finally {
    if (driver) {
      await driver.quit();
    }
  }
}

runTest();  

입력필에드 텍스트 입력 및 지우기

지시사항

Builder와 By를 require 합니다.
async 함수 내에서 Firefox 드라이버를 실행하고 로컬 페이지로 이동합니다
ID가 searchBox인 input 요소를 await 하여 찾습니다.
찾은 요소에 sendKeys() 메서드를 await 하여 “Selenium 테스트” 텍스트를 입력합니다.
await driver.sleep(2000);를 사용하여 2초간 잠시 대기합니다.
clear() 메서드를 await 하여 입력 필드의 내용을 지웁니다.
await driver.sleep(1000);을 사용하여 1초간 잠시 대기합니다.
finally 블록에서 드라이버를 종료합니다.

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

const LOCAL_URL = 'http://127.0.0.1:8080/index.html';

async function runTest() {
  let driver;
  try {
    driver = await new Builder().forBrowser('firefox').build();
    await driver.get(LOCAL_URL);

    // TODO 1: ID를 사용하여 'searchBox' 요소를 찾고 await 하세요.
    let searchBox = await driver.findElement(By.id('searchBox'));

    // TODO 2: 찾은 입력 필드(searchBox)에 "Selenium 테스트" 라고 입력하고 await 하세요. (sendKeys() 메서드 사용)
    await searchBox.senKeys("Selenium 테스트");
    
    console.log("텍스트 입력 완료.");

    // 입력 확인을 위해 잠시 대기 (실제 테스트에서는 명시적 대기를 사용하는 것이 좋습니다.)
    await driver.sleep(2000); // 2초 대기

    // TODO 3: 입력 필드(searchBox)의 내용을 지우고 await 하세요. (clear() 메서드 사용)
    await searchBox.clear();
    
    console.log("텍스트 지우기 완료.");

    await driver.sleep(1000); // 지워진 것 확인용 1초 대기

  } finally {
    if (driver) {
      await driver.quit();
    }
  }
}

runTest();

동기식, 비 동기식을 제대로 알아야 할듯

실습 풀이

This post is licensed under CC BY 4.0 by the author.

Selenium 활용

페이지 이동 및 내용 확인

ID 이용 요소 찾기 및 속성 값 확인

태그 이름으로 요소 찾기 및 속성 값 확인

명시적 대기 (ExplicitWait) 사용

입력필에드 텍스트 입력 및 지우기

Trending Tags