プログラムど素人がVSCodeを使いNode.jsとSeleniumでChromeを動かしてみた

はじめに

タイトルのとおりにvscodeのインストールからNode.jsとSeleniumでChromeを動かすまでの流れ書いています。
コードなんて仕事で少し読んだくらいで「何やってるのかはなんとなーく分かるけど書くことはできないし全部は理解できない！(ｷﾘ」みたいな程度のスキルしかないので、細かい所はご容赦ください。

インストールする色々

• VSCode
  • 拡張機能: npm
• nodebrew : 0.9.8
  • node.js : 7.5.0
• selenium-webdriver : 3.6.0
• chromedriver : 2.36.0

VSCode

公式サイト より「Download for Mac」という緑色のボタンをクリックしてzipファイルをダウンロード。ダウンロードしたzipファイルを解凍すると、appファイルが展開されるのでそれを好きな場所に置く。無事に起動したら完了。

nodebrew

seleiumuのサポートバージョンを考慮してNode.jsのバージョン管理ができるようにnodebrewをインストール。
こちらをご参考にさせて頂きました。

selenium-webdriver の Node Support Policy ではv6.9とv7.5をサポートしているとのことで、新しい方のv7.5をインストール。

nodebrewでnodeをインストール

$ nodebrew install-binary v7.5
$ nodebrew use 7.5

npm install

npm installをするのはVS Code上で行う。
VSCode拡張機能のnpmをインストールして、コマンドパレットから以下をインストールする

selenium-webdriver

> npm: install and save dependency
> selenium-webdriver@3.6.0

chromedriver

> npm: install and save dependency
> chromedriver

実際にChromeを起動してみる

以下のコードでChromeを起動してYahooのTOPを表示する事ができる。JavaScriptでのプログラムお作法については全くの無知なのでお察しください。

sample.js

webdriver = require('selenium-webdriver');

driver = new webdriver.Builder()
    .withCapabilities(webdriver.Capabilities.chrome())
    .build()

driver.get('https://www.yahoo.co.jp/');

次やること！

とりあえず起動してとあるページを開くというところまではできたので、次はページ内の要素にアクセスしてみたり、JavaScriptのお作法を覚えたり、そもそもWebdriverIOとなるものもあるので、そこら辺の勉強をしていきたい。

この記事を書くときに詰まったときのメモ

npmでpackageのversionを調べたいとき

selenium-webdriverをバージョン指定無しで実行すると4.0.0-alpha1がインストールされるので、alphaという安定してない感があったため存在するバージョンを調べるために使った。

npm info <package name> versions

npmでversionを指定してインストールする

コマンドパレットからnpm installする場合は<package name>@<verison>をフォームに入れるだけ。以下はターミナルからコマンドで実行する場合に使う。

npm -g install <package name>@<version>

npm install の "-g" って？？

-gはglobalを意味しており、他のプロジェクトでも利用するような横断的なpackageをインストールするときにつけるものらしい。