HTML要素のスクレイピングをJavaScriptのES6でやってみる

こんにちは!

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

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

1. 色々な情報を取得してみる

まずは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などで回すことができます。

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

2. まとめ

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

・document.querySelector

・document.querySelectorAll

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

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

関連記事

プロジェクトストーリー

おすすめ記事

技術

コメント

この記事へのコメントはありません。

カテゴリー

TOP
TOP