Chrome 92以降のSharedArrayBuffer警告に対するZOZOTOWNが実施した調査と解決策 - ZOZO TECH BLOG
こんにちは、ZOZOTOWN部フロントエンドチームの高橋（@anaheim0894）です。 Chrome 92から「SharedArrayBuffer」の仕様が変更されます。それに伴い、ZOZOTOWNの対応方針と解決策をご紹介いたします。そもそも「SharedArrayBuffer」が何のことなのか分からず困っている方も多いかと思います。本記事で紹介するZOZOTOWNの取り組みが対応時に皆様の参考になれば幸いです。 取り組みのきっかけ 2021年3月、Google Search Consoleに以下メッセージが送られてきました。 Googleの公式アナウンスによると、「Chrome 92からはcross-origin isolation（クロスオリジン分離）が構成されていないと正常に動作しなくなる」と書かれていました。 つまりSharedArrayBufferを引き続き使うには、他サイ
2021年のエンジニア新人研修の講義資料を公開しました - Cybozu Inside Out | サイボウズエンジニアのブログ
こんにちは。開発本部 オンボーディングチームの酒井（@sakay_y）です。社内のオンボーディングコンテンツを、どんどん社外へ公開することを夢見ています。 2021年もエンジニア新人研修を行いましたので、軽い紹介と、講義資料および一部講義動画（New!）を公開いたします。 2021年のエンジニア研修について 講義資料公開 Webアプリケーション基礎 HTTP/DNS ソフトウェアライセンス ソフトウェアテスト テスト自動化 アクセシビリティ Docker Chrome Developer Toolsの使い方 サイボウズのアジャイル・クオリティ デザインの役割と関わりかた データベース CI/CD セキュリティ モブに早く慣れたい人のためのガイド ITコミュニティ文化と情報発信に共通する成長と貢献の要素 正規表現 Kubernetesを使った開発入門 モニタリング入門 gRPC入門 日本語話
ウェブアクセシビリティ検証ツール「axe」を用いた自動テスト実行スクリプト | Accessible & Usable
公開日 : 2021年2月23日 (2022年7月1日 更新) カテゴリー : アクセシビリティ Deque Systems, Inc. が開発、公開している、「axe」というウェブアクセシビリティ検証ツールがあります。Chrome、Firefox、Edge の拡張機能がリリースされており、各ブラウザの開発者ツールで使用することができます。 ウェブアクセシビリティ検証ツール「axe」(Chrome 拡張機能) の表示例 axe はとても便利なツールですが、ブラウザの拡張機能として使用する場合、1ページずつ開いてアクセシビリティを検証する、という形になります。検証対象サイトのページ数が多い場合、面倒に感じることもあるかもしれません。 axe では、コアエンジン「axe-core」もオープンソースで公開されているので、これを応用することで、ブラウザ自動操作ツールを介してウェブサイト (複数のウ
Automatically record puppeteer tests - Chrome DevTools - Dev Tips
Chrome DevTools: Record tests with the puppeteer recorder Last updated: 25th November 2020 Introduction The Puppeteer Recorder feature in Chrome DevTools can monitor your webpage interactions and generate the code to automate a browser. For example, if you click on an element and type an email address into an email field, the recorder can generate the following code: await page.click("aria/Login")
Selenoid 入門 〜軽量で多機能な Selenium Grid〜 - 生産性向上ブログ
github.com 今回は、軽量で多機能な Selenium Grid である Selenoid についてまとめてみます。 目次 Selenium Grid とは？ Selenoid とは？ 軽量 セッションごとに Node が作成される 便利な機能 Getting Started Selenoid の起動 ステータスチェック テスト Live ブラウザスクリーン 録画 ログ取得 Selenoid の停止 Docker の推奨設定 ブラウザの設定ファイル その他の機能 まとめ Selenium Grid とは？ まず、いきなり Selenoid について書く前に、その前提となる Selenium Grid について簡単に説明します。 ブラウザテストの自動化などでよく使われる Selenium ですが、並列で複数のブラウザを使用して Selenium テストを実行するときに Seleniu
E2E テスト自動化プラットフォーム「Autify」を使ってシナリオをレコーディングする - kakakakakku blog
2019年10月に正式リリースとなった「E2E テスト自動化プラットフォーム Autify」を試す．今回は Autify の CTO 松浦さん (@dblmkt) に期間限定の検証アカウントを作っていただいた．ありがとうございます！ autify.com 今まで Selenium や Capybara (Poltergeist) を使った E2E (End to End) テストの導入経験はあるし，最近だと Cypress や Puppeteer を使う機会もある．とは言え，技術選択よりも「E2E テストを継続的にメンテナンスすること」に対して課題を感じる．仮説検証を繰り返すためにリリース頻度を上げていくと，あっという間に E2E テストも落ちてしまう．適当に XPath を修正したり，修正を諦めた経験もある． 今回紹介する「Autify」を使うと AI にシナリオのメンテナンスを任せられ
WPTをChromeで実行してHTML5 APIを理解する - Qiita
WPTとは WPT (web-platform-tests)という、ブラウザを作っている人のためのテストスイートがある。これは、ブラウザがどう動くべきかを定義している様々なWeb標準を、各ブラウザが満たしていてるかを確認するためのテストなのだが、Webサイトを作っているWebデベロッパーが新しいWebのAPIをどう使ったらいいかを調べるときにも役立つと思う。 という話を、電車で横に座っていたとある人に話したら「じゃあ、やり方を(日本語で)紹介してくださいよ。」と言われたので、簡単に紹介したい。 手軽に試す 手軽に試したければ、https://w3c-test.org 以下にある目的のテストファイルを開くといい。 例えば、Service Worker Navigation Preloadのテストであれば https://w3c-test.org/service-workers/service
ChromiumでFeatureをShipした話 - elkurin’s blog
2020年の1月-3月の3ヶ月間、GoogleのChromeチームでインターンをしました。Chromeプロダクトでインターンをするのはこれで3回目です。したがって、Chromeにもインターンにも比較的慣れており、仕事のスタートアップとラップアップに限って言えば正社員さんよりも回数をこなしている入社と退職のエリートです。 そんな僕が今年配属されたのはChrome Worker Teamでした。この記事ではインターンで実際に体験させてもらった「ChromiumでFeatureをShipする流れ」について紹介しようと思いますが、その前に今回のターゲットであるWorkerというものについて軽く説明してみます。(詳しい仕組みなどはまた別の記事で書いたり書かなかったりします。) Workerとは？ Workerとは、別スレッドでスクリプトを処理させるためのAPIです。重そうな処理とか別働隊として稼働し
TestCafe で E2E テストを始めよう #1 - 概要説明 と Hello World | Recruit Tech Blog
TestCafe とは？ TestCafe とは、Developer Express Inc. というアメリカのシステム開発会社が開発している E2E テストツールです。 A node.js tool to automate end-to-end web testing | TestCafe 同社はもともと TestCafe Studio という IDE（E2E テストケースオーサリングツール）を商用として提供していましたが、2016 年に TestCafe Studio のコア部分を OSS として提供するようになりました。今回ご紹介するのは、このコア部分についてです。 シリーズ一覧 概要説明 と Hello World 👈 この記事 ベーシック認証とユーザーロール（アカウント認証） よりプログラマブルな作りにする 関心の分離・メンテナブルなテストを書くためのベストプラクティス 大まか
GitHub Actionsのワークフローを利用してクロスブラウザのE2Eテストを自動化する - Money Forward Developers Blog
こんにちは。 『マネーフォワード クラウド経費』のフロントエンドエンジニアをしている木村(@kimromi)です。 Ruby on Railsを利用してサービス開発を進めているプロダクトのフロントエンドの環境を整えていき、UIの改善やフロントエンド側の開発効率アップなどにつなげていくような動きを現在やっています。 なぜクロスブラウザのE2Eテストが必要になったか ある日、IE11のみでJavaScriptエラーが起こり動作しないとの連絡が入り、慌てて対象のプルリクエストをリバートしたということが起こりました。 原因としてはライブラリの追加によるものでした。 現在フロントエンドの改修を行っていく中で、ライブラリの追加やビルド方式の変更などドラスティックな変更をすることが多くなってきています。 そのたびにMicrosoftからダウンロードできるVM環境を立ち上げ手元で確認するのは手間がかかり確
Rails アプリケーションの不安定なテストを撲滅したい 〜system spec のデバッグ方法とテストを不安定にさせる要因〜
Rails アプリケーションの開発において、自分の変更に関係のないテストのせいで CI がコケるとストレスですよね？真っ先に直したくなりますよね？不安定なテストを直すのは大変な労力が要ると思ってませんか？実は、たいていのケースは簡単に再現確認ができるし、不安定になる要因もだいたい決まっているし、ログやスクリーンショットを見れば原因も簡単に特定できるんです！ そんなわけで、日頃不安定なテストを潰している身として知見みたいなものをまとめてみました。 今回利用した環境は次のとおりです。 rails 6.0.0 capybara 3.29.0 selenium-webdriver 3.142.4 rspec-rails 3.8.2 Google Chrome 77.0.3865.75 (headless で使用) ChromeDriver 77.0.3865.40 (f484704e052e0b5
GitHub上でSwaggerをプレビューできるChrome拡張機能を作った - Qiita
概要 GitHub 上で、Swagger の yaml | yml | json を Swagger-UI に変換できる Chrome 拡張機能を作った。 その紹介。 「Swagger とは？」という話は、下記等を参照のこと。 Swaggerの概要をまとめてみた。 - Qiita Demo クリックするだけ。簡単に変換できる。 全展開・全折り畳みができて便利。 インストール Chrome Web Store からインストールできる。 swagger-viewer - Chrome ウェブストア 特徴 簡単 1クリックで変換できる 依存なし この拡張機能のみで動作する Web の Swagger Editor を開いたり、ドキュメント生成サーバーを起動する必要なし セキュア（たぶん） 外部ネットワークへの送受信はないため、業務でも使用できる ※自己責任でお願いします たぶん Chrome の
メルカリWeb版のUIテスト自動化で目指している世界と、そのために作った Selenium Grid・Zalenium 環境 on Azure Kubernetes Service(AKS) | メルカリエンジニアリング
メルカリWeb版のUIテスト自動化で目指している世界と、そのために作った Selenium Grid・Zalenium 環境 on Azure Kubernetes Service(AKS) メルカリの自動化＆品質保証グループ（Automation & QA Group：通称AQA）の 根本 征 です。 私は普段、テスト自動化・CI / CD 改善・その他社内の生産性を上げるための自動化を行っています。 今回は、最近私たちが行なっているメルカリWeb版のUIテスト自動化と、その自動テスト環境についてご紹介したいと思います。 メルカリWeb版のUIテスト自動化について UI自動テスト環境に関する課題 Selenium Grid を Azure Kubernetes Service(AKS) 上で構築する Zaleniumを試す Azure Kubernetes Service(AKS)で受け
端末性能を測るWebGLアプリ作ってみた - KAYAC engineers' blog
こんにちは。技術部平山です。 この記事では、雑にベンチマークプログラムを作ってみたことと、それに付随して、 ベンチマークプログラムを作りたくなるような事情 テストの設計と、その背後にあるハードウェア といった点について書きます。 なお、実行はこちらからWeb上で可能です(上のスクショを押しても飛べます)。 UnityのWebGLにすることで、余計な手間なく多くの機械で測れるようにしています。 ただし、WebAssemblyを使っている関係上、iOS9以前では動きません。ご容赦ください。 測ってくださった方は、 twitterで結果(スクショ)を頂けると大変うれしいです。 ゲーム機、ハイエンドPC、古いスマホ、などは特に歓迎です! なお、ソースコードもgithubにあります。 測定方法 「ALL」を押し、元の画面に戻ってくるまで(キャラクターの絵が出てくるまで)放っておきます。 途中でスリー
Googleの新ツールが便利すぎる！デザイナーやディレクター向けの新しいデザインツール -ProjectVisBug | コリス
VisBugはChromeの機能拡張で、ブラウザに表示したページのデザインやコンテンツを検証・編集できます。グリッドの確認はもちろん、要素を移動させたり、入れ替えたり、別の画像にしたり、テキストを編集したり、カラーを変更したりなど、さまざまなアイデアを実行・テストすることができます。 制作や検証時だけでなく、クライアントとの打ち合わせ、社内ミーティングなど、活躍するシーンがたくさんある便利ツールです。 VisBug -GitHub VisBugの特徴 VisBugのインストール VisBugの機能 VisBugの特徴 VisBugはChromeの機能拡張で、デベロッパーツールのデザイナーやディレクター向けという感じです。開発者のAdam Argyle氏は、Googleの現役UXエンジニア。 機能拡張なので、使うのは簡単です。 Chromeで当ブログを表示し、VisBugを起動してみました。
最新のJavaScript技術を使ったウェブサイトを検索向けにする方法 #ChromeDevSummit | 海外SEO情報ブログ
[レベル: 上級] この記事では、11 月 12 〜 13 日に米サンフランシスコで開催された Chrome Dev Summit 2018 に参加した際のセッションをレポートします。 セッションテーマは、JavaScript を多用したサイトを検索で発見されやすくするためのベストプラクティスと注意点です。 セッションスピーカーは、Google チューリッヒの Martin Splitt（マーティン・スプリット）氏と Google シドニーの Tom Greenaway（トム・グリーンアウェイ）氏です。 最新の JavaScript 技術で構成されたウェブサイトを検索フレンドリーにするための秘訣をマーティンとトムの2人がどんなふうに解説したのかを一緒に見ていきましょう。 JavaScript コンテンツの処理プロセス 1. クロール ⇒ 2. レンダリング ⇒ 3. インデックス 静的な
Rails+ReactなSPAサイトでSEOをしようとしてぶつかった壁 - オウチーノ開発者ブログ
Rejectcon 2018 レポート記事 こんにちは。オウチーノ吉川です。 去る9/29にRejectconで「Rails+ReactなSPAサイトでのSEO」について登壇してきました。 SPAサイトでSEOを行う際にぶつかった壁と、それをどのように乗り越えていったかの経緯をご紹介しました。 ちょっと内容詰め込みすぎて途中途中端折ってしまったのと、発表後にもいろいろ質問などをいただいていたのであわせて補足しながらご紹介します。 発表資料はこちらです。 なぜ経緯を紹介したのか？ 昨今のフロントエンド技術の進化速度は非常に速く、どんどん新しい技術が登場しています。 記事などでどういった技術が登場しているのかは抑えているが、実際に全てちゃんと触ってはいないという方も多いのではないでしょうか。 SSRをするためにはreact-railsやhypernovaがある、ということを知っているだけでは、
poltergeistからheadless chromeへ移行する時に気をつけること - メドピア開発者ブログ
こんにちは。メドピアのRuby(Rails)化をお手伝いしている@willnetです。最近は子育てに忙しくしています 👶 先日、メドピアで利用しているcapybaraのjavascript driverをpoltergeistからheadless chrome(selenium-webdriver)に移行しました。driverを変更するにあたって既存のテストコードをいくつか修正する必要があったので、そこで得た学びを共有したいと思います。 なぜ移行したのか ここ数年、Railsでエンドツーエンドのテストを書くときにはpoltergeistを使う、というのがデファクトスタンダードだったはずです。それ以前はみんなcapybara-webkitを使っていましたが、poltergeistはバックエンドにPhantomJSを使っており、Qtに依存しているcapybara-webkitと比べてビルドが
E2EテストをPhantomJSから、Puppeteer + Headless Chromeへ移行しました - LCL Engineers' Blog
Webエンジニアの森脇です。LCLでは、以前より「Capybara + PhantomJS」でE2Eテストを行っていましたが、「Puppeteer + Headless Chrome」へ変更しました。 元々は、軽くPuppeteerを触ってみるだけのつもりでしたが、できが良く本格的にE2Eテストへ導入することにしました。 本記事では、変更の経緯や、PuppeteerでE2Eテストを実装する上でのTIPSを紹介します。なお、Capybara + PhantomJSを利用したE2Eテストは、以下の記事でご紹介しております。 techblog.lclco.com 変更の経緯 PhantomJSは古めのWebkitをベースにしているため、一部のCSSがうまく適用されず、Headless Chromeへ移行を以前より考えていました。そんな中、PhantomJSの開発が終了したこともあり、移行すること
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Engadget | Technology News & Reviews
