YouTubeYouTube でお気に入りの動画や音楽を楽しみ、オリジナルのコンテンツをアップロードして友だちや家族、世界中の人たちと共有しましょう。
Webページを監視して表示崩れが起きていないか検出できるE2Eテストを実装しました | Recruit Tech Blog
お世話になります、フロントエンド担当をしている小原正大です。Webページの表示を監視して差異があった場合、どのページで表示の変化が起きているかを知ることが出来るプログラムを実装したのでそのことについて書こうと思います。 何につかったの？ 僕がフロントエンドを担当しているサービス『料理サプリ』で大規模なフロントエンドコードのリファクタリング行う際に表示テストを自動化するために作成しました。『料理サプリ』はPC・スマホ合わせて大体350-400ページの表示パターンが存在する比較的規模の大きいサイトです。全ページに影響を与えるような作業は大規模な回収となり、今回のリファクタリングでは表示テストの計画などの段取りが必要でした。従来の人手によるQAでは細かいバグを見過ごしたり時間がかかり効率が悪いので、可能な限り自動化しようと考え実装しました。 実装の概要 この監視のシステムは以下の２つ実装を組合わ
Webサイト全体のスクリーンショットが撮れるWeb APIまとめ
外部のWebサイトのスクリーンショットが必要になるケースはよくありますが、その中でもWebサイト全体が撮れるものを紹介します。サムネイルであったり、サイズ指定ができるものは多いですが、高さが不定であるWebサイトをきちんと撮れるものはそう多くないようです。 screenshotlayer API 独自のCSSを追加したり、viewportの設定、撮影したスクリーンショットをFTPやAmaozon S3へアップロードすることも自由に指定できます。画像フォーマットはPNG、JPEGそしてGIFとなっています。 screenshotlayer API | Free, Powerful Screenshot API ApiLeap Google Chromeを使っているという点がユニークなポイントとして挙げています。Chromeであれば、新しい技術にも追従できるのは利点でしょう。Viewportの
Googleがウェブサイトをできる限り踏ませないように進化している今、ブロガーにできることは何か - 俺の遺言を聴いてほしい
Googleがユーザーの「検索意図」を予測して、検索結果を変化させていることは多くの人が知っているだろう。 たとえば、「SMAP SHAKE」と検索すると、一番上にYoutubeの動画が表示される。 「SMAP SHAKE」の検索結果 検索ボックスの下のタブに注目してほしい。 「すべて」のすぐ右に「動画」があるのがわかるだろう。 これは、 「『SMAP SHAKE』で検索するユーザーは動画を求めているだろう」 とGoogleが判断し、「動画」を左に寄せたのだ。 「渋谷 イタリアン」で検索すると、今度は地図が一番上に出てくる。 「渋谷 イタリアン」の検索結果 タブは「すべて」の横に「地図」が配置され、検索画面上に営業時間やGoogle上の評価までもが表示されるようになった。 Googleの目的は、「世界中の情報を整理し、世界中の人々がアクセスできて使えるようにすること」である。 その目的の中
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
