Seleniumで挑む、SPAのE2Eテスト自動化
Webアプリケーションのフロントエンドを作る上で話題になりがちなSPA（Single Page Application）ですが、SPAのE2E（End-to-End）テストについて話題になることはあまりないと思います。筆者は、仕事でSPAのSeleniumテストを書いたことがあり、Seleniumで通常のWebアプリとあまり変わらずテストできる一方、気をつけるべき特徴もあると感じました。第6回の今回は、筆者の経験を元に、実際の業務でSPAのSeleniumテストを書く上での知見を紹介します。 illustration by iwasawa SPAの特徴 SPAとは、WebアプリケーションやWebサイトを単一のページのみで構成し、ユーザーが操作したときにブラウザの画面遷移なしで現在のページを動的に書き換えるものです。ユーザーは画面遷移によってUXが途切れることがないので、よりネイティブなアプ
ヘッドレスブラウザ(Chrome)を使ってSPAをスクレイピングする - Qiita
一般的なスクレイピング手法とその問題点 スクレイピングというと、HTTPクライアントライブラリを用いてHTML取得し、HTML/XMLパーサーで解析するというのが一般的だと思います。 この手法の場合、以下の場合にうまく処理できません。 ターゲットのページがJavaScriptにより動的にDOMを操作する場合 HTML/XMLパーサーが取得したHTMLを正しく解釈できない場合(正しくないHTMLでもブラウザはなんとか処理するが、パーサーライブラリは正確なHTMLでないと処理できないことがある) 特に問題になるのは前者でしょう。最近のWebサイトではJavaScriptでDOMを操作することは珍しくなくなってきています。SPAであればなおさら難しく、もはやこういった手法によるスクレイピングは不可能でしょう。 ヘッドレスブラウザによるスクレイピング 動的なDOMやパーサーがうまく解釈できないとい
Bootstrapでシングルページをコーディング (1/5)
メインイメージを作る メインイメージ部分は、大きなロゴと短い文章のみの非常にシンプルな構成です。ロゴや文章を「index.html」に指定し、オリジナルのスタイルを「theme.less」に記述してデザインを整えます。 index.htmlは次のように変更します。 ■変更前のソースリスト（index.htmlの一部、緑色部分を変更） </nav> <div class="container"> <h1>Hello, world!</h1> </div> <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> ■変更後ソースコード（index.htmlの一部、緑色の部分が変更箇所） </nav> <div class="mainimage"> <div class="container"> <img src="images
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
karmaを使ったSPA向けE2Eテスト技法
Vue.jsによるWebアプリケーション開発 - SSSSLIDE
