selenium 이미지 등록 테스트 자동화 코드 공유 node.js

[daehwan2]

selenium을 이용하여 이미지 등록을 자동화하는 코드이다.
현재 코드는 4개의 이미지를 등록하게 된다.

불편한점은 현재실행중인 크롬에서 실행되는게 아니기때문에 로그인을 새롭게 다시 해주어야 한다는 것이다.
이때 카카오 인증과정이 필요해서 20초안에 카카오톡으로 확인버튼을 눌러야만 하도록 설정했다.

이 또한 귀찮기 때문에 추후에 수정이 필요할 것 같다.

사용법

.env 파일에 카카오 이메일, 비밀번호를 입력하고 이미지 경로를 코드에서 따로 설정해주면 등록이 자동화된다.

.env

EMAIL=test@test
PASSWORD=1234

app.js

require("chromedriver");
require("dotenv").config();
var { Builder, By, Key, until } = require("selenium-webdriver");
const chrome = require("selenium-webdriver/chrome");
(async function helloSelenium() {
  try {
    const chromeOptions = new chrome.Options();
    chromeOptions.excludeSwitches("enable-logging");
    var driver = new Builder()
      .forBrowser("chrome")
      .setChromeOptions(chromeOptions)
      .build();

    await driver.get("http://localhost:3000/login");

    const kakaoLoginButton = await driver.findElement(
      By.className(
        "w-[280px] h-[60px] bg-[#F5E14C] rounded-xl mt-24 m-auto shadow-md cursor-pointer"
      )
    );

    await kakaoLoginButton.click();

    const emailInput = await driver.findElement(By.id("id_email_2"));
    const passInput = await driver.findElement(By.id("id_password_3"));

    await emailInput.sendKeys(process.env.EMAIL);
    await passInput.sendKeys(process.env.PASSWORD, Key.ENTER);
    await driver.sleep(20000);
    await driver.navigate().to("http://localhost:3000/registerWorldcup");
    await driver.sleep(1500);
    const titleInput = await driver.findElement(By.id("titleInput"));
    await titleInput.sendKeys("테스트 제목");

    const file = await driver.findElement(By.id("chooseFile"));
    await file.sendKeys(
      "C:\\blogmaker\\assets\\built\\images\\author-logo.jpg"
    );
    await file.sendKeys(
      "C:\\blogmaker\\assets\\built\\images\\background-frontend.jpg"
    );
    await file.sendKeys(
      "C:\\blogmaker\\assets\\built\\images\\blog-cover1.jpg"
    );
    await file.sendKeys("C:\\blogmaker\\assets\\built\\images\\bus.jpg");

    for (let i = 0; i < 4; i++) {
      const imageTitle = await driver.findElement(By.id(`imageTitle${i + 1}`));
      const imageTag = await driver.findElement(By.id(`imageTag${i + 1}`));
      await imageTitle.sendKeys(`${i + 1}번 이미지`);
      await imageTag.sendKeys("감자", Key.ENTER);
      await imageTag.sendKeys("고구마", Key.ENTER);
      await imageTag.sendKeys("김", Key.ENTER);
    }

    const submitButton = await driver.findElement(By.id("submitButton"));
    await submitButton.click();
  } catch (err) {
    console.log(err);
  }
})();

[on-Sync]

고생하셨습니다.
첫 인증 시 추후에는 문제가 없는것이겠죠?

사용하신 부분에서 지정 값들을 상수로 다루시지 마시고,
변수로 변경하신 후에 함수형태로 분리하시는 것이
브라우저를 변경하거나 기타 조건 변경에서 재활용성에 유리해보입니다.

또한 해당 변수들에 데이터들도 실행시 입력데이터를 외부에서 주입할 수 있는
방식을 고려해 보시는게 좋습니다. 현재는 고정값으로 진행하시만, 변동시 소스코드를
수정해야하는 비용이 들게 됩니다. 외부 주입이 가능하다면 실용성이 확보됩니다.
방식은 node 에서 사용할 수 있는 arg, file, env 등 여러가지가 존재하겠지만
편하신 방법으로 주입 가능한 방법 고려해보시는걸 추천드립니다.

그렇기에 현재 .env 처럼 정보를 별도로 관리하신 점은 좋은 습관입니다, 하지만 env 는 오픈형 값이기에 개인적으로는 별도 file 형식으로 유출되지 않아야 하는 정보를 관리하시고 git add 에서 제외하시는 것이 좋습니다. file 방식을 더 권해드리는 이유는 CLI 방식으로 arg 를 전달하는 것은 서버상 로그 히스토리로 남을 수 있기 때문입니다.

그리고 해당 소스의 목적이 테스트 응용 및 서비스의 안정성인 것을 생각할 때
docker build 의 step 을 나누어 이미지 빌드 중 테스트 결과에 따라
throw Exception 처리하는 것이 해당 소스의 완성형으로 생각됩니다.

다시 한번 고생하셨습니다.