こんにちは！

最近フロントテストの自動化のためにSeleniumを業務でよく使うため、今回はまず HTMLの要素 をJavaScriptのES6でスクレイピングしようと思います。

参考サイトはｗ２のECプラットフォームである「Value 5」のEC ショップ画面です。

まずはChromeで「Value 5」のテスト用ECショップ画面を開いてから、「Command + Shift + i」でデバッガーのコンソールを開きます。

単体取得

基本的にIDで取得する場合は、getByIdを使いますが、ES6から使えるquerySelectorを使うと、単体取得なら全てこちらで完結するのでとても楽です。

引数はCSSセレクターで指定できるため、CSSさえわかっていれば使うことができます。

1.画面のヘッダーにあるログインの文字列を取得してみます。「#HeadMembers」の中の「a」タグ内にログインの文字列があるようなので、CSSセレクタは「HeadMembers>a」と記述します。

では、次に「a」タグのテキストを取得したいため、今回はinnerTextで取得します。

こちらも取得できました。とても簡単ですね！

複数取得

では、次に querySelectorAllを使ってみましょう。

今回は複数のエレメントが取得できる querySelectorAll を使います。こちらもCSSセレクタで指定します。

1.まずはページ上記にあるナビゲーションメニューの「aタグ」を全て取得してみます。
欲しいaタグの階層は「#HeadGlobalNavi>ul>li>a」なので、そのまま querySelectorAll に記述します。

2.では、aタグのテキストを取得してみます！

[…] と書かれている記述は、スプレッド演算子というものです。こちらを使うと、複数のエレメントを取得した際に、簡単にmapなどで回すことができます。

ナビゲーションメニューの文字列を全て取得できました！

デベロッパーツールなどで、HTMLのデータを取得しようと思った場合、私は基本的に下記2つを使って取得します。

・document.querySelector

・document.querySelectorAll

取得してきた複数のエレメントの場合は、mapやforEach, filter, reduce, every, someなどを駆使して必要な値を取得する、という感じです。

ES6のJSは、ChromeやFireFoxだと標準で動くため、デバッガーツールで使うには非常に便利です。次は、DOM操作繋がりであるSelenium IDEを紹介したいと思います。