소개

Selenium을 사용해 볼 기회가 있었기 때문에 비망록으로 정리하려고 생각하고 기사를 썼습니다.
현재 주로 자바 스크립트를 사용하고 있기 때문에 Node.js를 사용하여 Selenium을 실행하려고합니다.
Node.js의 환경 구축에 대해서는 여기의 순서로 실시하고 있습니다.

Selenium이란?

웹 브라우저의 조작을 자동화하는 도구.
이번에는 Selenium을 Node.js 내에서 사용하여 웹 브라우저를 조작하고 싶습니다.

거친 흐름

필요한 패키지 드라이버 다운로드

실행 파일 만들기

실행

아래에서 자세히 설명하겠습니다.

필요한 패키지 드라이버 다운로드

selenium-webdriver 설치

$ npm install --save selenium-webdriver

--save : package.json의 dependencies에 추가됨

각 브라우저의 드라이버 다운로드

주요 브라우저에서 작동하려면 위의 패키지 외에도 다음 드라이버를 다운로드하여 실행 파일과 동일한 경로에 넣어야합니다.


브라우저
드라이버


Chrome
chromedriver(.exe)

Internet Explorer
IEDriverServer.exe

Edge
MicrosoftWebDriver.msi

Firefox
geckodriver(.exe)

Safari
safaridriver


이번에는 Chrome을 사용하므로 위 표의 Chrome 드라이버 페이지을 클릭합니다.



버전 86을 사용하므로 대상 버전 열을 클릭합니다.
(어떤 버전의 드라이버를 다운로드할지는 여기 페이지 참조)



Mac 드라이버 (chromedriver_mac64.zip)를 선택하고 다운로드하십시오.
압축 해제 후 Node 실행 파일과 동일한 경로에 배치하면 준비가 완료됩니다.

$ cp ~/Downloads/chromedriver .

실행 파일 작성

이번에는 Qiita의 톱 페이지를 열고 콘솔 로그를 가져옵니다.

실행 파일의 완성

selenium_app.js

// ライブラリを呼び出す
const webdriver = require("selenium-webdriver");
const chrome = require("selenium-webdriver/chrome");
const { Builder } = webdriver;
const { Preferences, Type, Level } = require("selenium-webdriver/lib/logging");

// await を使うため，async function 内で処理を記述する
(async function () {
  // オプション付きでブラウザを立ち上げる
  const capabilities = webdriver.Capabilities.chrome();

  const logPrefs = new Preferences();
  logPrefs.setLevel(Type.BROWSER, Level.ALL);
  capabilities.setLoggingPrefs(logPrefs);

  const options = new chrome.Options(capabilities);

  const driver = await new Builder().forBrowser("chrome").setChromeOptions(options).build();

  // Qiitaのトップページへ遷移
  await driver.get("https://qiita.com/");

  // 5秒待機
  await driver.sleep(5000);

  // コンソールログの取得
  const consoleLogs = await driver.manage().logs().get(Type.BROWSER);

  for (let i = 0; i < consoleLogs.length; i++) {
    console.log(consoleLogs[i]);
  }

  // 終了
  await driver.quit();

})();

이하에서는 상세를 설명합니다.

실행 파일 만들기

먼저 새 파일을 만듭니다.

$ touch selenium_app.js

webdriver 호출

공식 문서을 참조하여 실행 파일에서 chrome webdriver를 호출합니다.
또한 로그를 얻는 데 필요한 webdriver의 라이브러리를 호출합니다.

selenium_app.js

// ライブラリを呼び出す
const webdriver = require("selenium-webdriver");
const chrome = require("selenium-webdriver/chrome");
const { Builder } = webdriver;
const { Preferences, Type, Level } = require("selenium-webdriver/lib/logging");

브라우저 시작

콘솔 로그를 검색하는 옵션을 지정하여 브라우저를 시작합니다.

selenium_app.js

// オプション付きでブラウザを立ち上げる
const capabilities = webdriver.Capabilities.chrome();

const logPrefs = new Preferences();
logPrefs.setLevel(Type.BROWSER, Level.ALL);
capabilities.setLoggingPrefs(logPrefs);

const options = new chrome.Options(capabilities);

const driver = await new Builder().forBrowser("chrome").setChromeOptions(options).build();

이번에는 콘솔 로그를 얻기 위해 로그 유형을 Type.BROWSER로 지정합니다. 수 있습니다.

페이지 전환

조작하려는 페이지의 URL을 지정하고 해당 URL로 전환합니다.

selenium_app.js

// Qiitaのトップページへ遷移
await driver.get("https://qiita.com/");

콘솔 로그 검색

selenium_app.js

// コンソールログの取得
const consoleLogs = await driver.manage().logs().get(Type.BROWSER);

여기 Type.PERFORMANCE를 Type.BROWSER로 설정하면 개발자 도구의 네트워크 정보를 포함하는 로그 정보를 얻을 수 있습니다.

드라이버 종료

selenium_app.js

// 終了
await driver.quit();

실행

실행 파일이 상주하는 디렉토리로 이동하여 다음 명령을 실행합니다.

$ node selenium_app.js

다음과 같은 결과가 표시되면 성공

Entry {
  level: Level { name_: 'DEBUG', value_: 700 },
  message: 'https://qiita.com/ - [DOM] Input elements should have autocomplete attributes (suggested: "current-password"): (More info: https://goo.gl/9p2vKq) %o',
  timestamp: 1610609498344,
  type: ''
}

참고

(공식)selenium-webdriver API Docs

(공식) WebDriver에 대한 문서

Node.js+Selenium WebDriver에서 브라우저 오류 로그를 얻는 이야기