Node.jsとSeleniumでWebアプリのUIテストを自動化（2023年版） - ICS MEDIA
Webアプリケーションを開発する際、みなさんはどのようにテストを行っていますか？ Webアプリケーションは、ユーザーごとに異なるブラウザを使用しており、ユーザー操作も必要となるため、手作業でテストをされている方も多いと思います。また、機能改修やバグフィクス後に、リグレッションテスト（改修により既存機能への影響がないかを確認する回帰テスト）が必要となりますが、時間が取れずしっかりとテストができていない方も多いのではないでしょうか。 本記事では、これらのテストを自動化することのできる「Selenium Webdriver」（セレニウム ウェブドライバー）について紹介します。 入力フォームのバリデーション機能をチェックするデモ 簡単な入力フォームのバリデーション機能をチェックするデモを動画で紹介しましょう。入力値に対して期待するエラー文言が表示されているかのテストを実施しています。Seleniu
UserScriptをお気に入りのエディター/IDEで編集する方法 @Tampermonkey - klim.log()
前回も書いたが、最近はUserScriptを書いている。 実行環境はだいたいTampermonkeyなのだが、この拡張内のJavaScriptエディターがやや貧弱な点が気になった。設定からいくらか利便性を向上させることはできるが、やはり使い慣れたツールには敵わない。 klim0824.hatenablog.com そこでUserScriptを使い慣れたエディターやIDEで書きたいと感じたのだが、その方法が分かったのでブログにまとめておくことにする。 TL;DR Tampermonkeyの ファイルの URL へのアクセスを許可する のチェックを入れる。 TampermonkeyにラッパーとなるUserScriptをインストールし、ローカルにあるUserScriptを@requireする。 ローカルにあるUserScriptを、好きなエディター/IDEで編集する。 動作確認 macOS Si
Chrome拡張機能でスクレイピング（動作検証済み） – myMemoBlog by 256hax
手作業で大量のWebサイトをコピペする場合は、いくつかの方法がある。 Chrome拡張機能でスクレイピングツールを使う ChromeにJSを実行するConsole/ブックマークレットを使う スクレイピングWebサービスを使う（import.ioなど） スクレイピング用アプリケーションを使う（UiPathなど） スクレイピング代行会社を使う（Octoparseなど） 今回は上記の１と２をメモる。 Chrome拡張機能 スクレイピングツール 1. Web Scraper Web Scraper 大量のページをスクレイピングする場合におすすめ。 かなり使いやすく、設定も慣れるとかんたん。公式サイトに動画で解説してくれていたり、スクレイピングのトレーニング用Webサイトまで用意されている。 Webサイトの階層もくだっていける。たとえば、大カテゴリー > 中カテゴリー > 小カテゴリー と各カテゴリ
あるDOM要素に対してクリック等した時に実行されるjsを突き止める方法
たとえば「要素Xをクリックしたら何かしらの問題が発生する」といったバグの解析時に「クリックされた時にどのjsファイルの何行目あたりが実行されるか」が知りたいのですが、いい方法は無いでしょうか? 現状では、やむなく要素Xのidやclass値でgrepをかけてしらみ潰しに調べています。 ポイントは、各種ライブラリ内部のjsというより、現在調査中のブロジェクトのjsファイル・行番号を突き止めたいという点です。 ブラウザはChrome, Safari, Firefoxです。
Chrome Devtools による フロントエンドパフォーマンスの計測
こんにちは。株式会社スタメンでFANTSのフロントエンドを担当している@0906kokiです。 今回の記事では、皆さんおなじみの Chrome Devtools にある Performance タブで、フロントエンドのパフォーマンスを計測する方法について書きたいと思います。 はじめに フロントエンドのパフォーマンス・チューニングと言うとバックエンドと比べて後回しになりがちですが、フロントエンドにアプリケーションの複雑性が寄ってきている現在、フロントエンドがボトルネックでレスポンスのレイテンシーが発生することは往々にしてあると思います。 バックエンドではユーザー数の増加や大量の同時接続に耐えられる負荷対策やパフォーマンス・チューニングが中心となりますが、フロントエンドではプロジェクトサイズの増加による JavaScript ファイルのダウンロードやスクリプティング、レンダリング速度の低下等が
getDisplayMedia()でブラウザから画面をキャプチャーする方法。 - Qiita
目的 getDisplayMedia()でブラウザから画面をキャプチャーする。 概要 getDisplayMedia()を使うと、ディスプレイまるごとやChromeのタブ、起動しているアプリ画面をキャプチャーできる。 取得したキャプチャーはMediaStream Recording APIを使用して録画したり、WebRTCセッションとして送信できる。 ゴール 開発環境 OS: macOS Mojave 10.14.4 ブラウザ: Google Chrome 73.0.3683.103 エディター: Visual Studio Code 1.33.0 ローカルサーバー: Live Server（VSCode拡張機能） 対応ブラウザ 参照:MediaDevices.getDisplayMedia() サンプルソース javascript "user strict"; const med
Visual Studio Code その3 - Google Chromeと連携してJavaScriptをデバッグできるようになりました・Debugger for Chrome拡張のインストールとデバッグ設定
「Visual Studio Code」から「Google Chrome」上で動作するクライアントサイドの「JavaScript」コードを直接デバッグできるようになりました。 デバッガーは「Chrome Debugger protocol」で「Google Chrome」に接続し、「Google Chrome」で読み込んでいるファイルと「Visual Studio Code」で開いているファイルの関連付け（マッピング）を行います。 「Visual Studio Code」で開いている「JavaScript」のソースコードにブレークポイントを設定したり、変数の確認や変数のウォッチを「Visual Studio Code」から行うことができます。 もちろんスタックコールの確認もできますし、ステップ実行やステップイン等の操作も可能です。 Google Chromeのディベロッパーツールと併用でき
ChromeのデベロッパーツールでJSをデバッグする方法 - ICS MEDIA
JavaScriptのデバッグは、ウェブ開発の必須スキルのひとつです。プログラムの実行をデバッグすることで、現在の変数の値や、処理がどのように進んでいるのかを確認できます。デバッグによってプログラムが意図した動作になっているかの分析に役立てられます。 本記事ではChrome・Edgeブラウザーの「Developer Tools」（以下「デベロッパーツール」、「DevToolsデブ・ツールズ」という略称もあります）を使用してJavaScriptをデバッグする際の基本的な使い方を解説します。「今までデベロッパーツールを使ったことのない」という方でもこの記事を読めば理解できるよう、チュートリアル形式になっています。20分ほどで理解できるようまとめているので、順番に試しながら読み進めてください。 この記事で学べること デベロッパーツールの使い方 JavaScriptのブレークポイントの使い方 実行
--headless時代の本命？ Chrome を Node.jsから操作するライブラリ puppeteer について - Qiita
--headless時代の本命？ Chrome を Node.jsから操作するライブラリ puppeteer について puppeteer はHeadless Chrome をNode.jsで操作しやすくしたライブラリです。今日(※ 2017/8/17)一日で凄い勢いでGitHubのトレンド入りしており、TLでも話題になっていたので、早速触ってみました。 Node.jsでChromeを操作するというコンテキストにおいては、Nightmare.jsと同じレイヤに属するプロダクトですね。Nightmare.jsはElectronを介在させることで、Chromeの操作を実現していましたが、今年の5月にChromeでheadlessモードが利用可能になって以降1、headless Chromeを直接操作するライブラリが色々と出始めていますね。この系統は、chromyや、やはり先日GitHubでトレ
JavaScriptでMacに歌ってもらう - Okiraku Programming
最近のChrome, SafariのJavaScriptには音声合成APIが入っています。 使い方は簡単で、JavaScriptコンソール等で var msg = new SpeechSynthesisUtterance('こんにちは!'); msg.lang = "ja-JP"; // 言語指定 window.speechSynthesis.speak(msg); のようにするだけで喋ってくれます。 音声エンジンを変えることも可能です。使える音声の一覧を var voices = speechSynthesis.getVoices(); で取得すると、voicesに音声オブジェクトのリストが返ってくるので、この中のlangやnameを見て使いたいものを msg.voice = voices[3]; などとSpeechSynthesisUtteranceオブジェクトのvoice属性に指定す
content_scripts と background_page でデータをやり取りする [Chrome Extensions を作ってみる：第五回]
Safari Extensions での「スクリプト」と「グローバルページ」でデータをやり取りするように、Chrome Extension でもやり取りが当然できる。しかも Safari Extensions よりも簡単にできる。 ★content_scripts // 変数 msg に "send" を格納 var msg = "send"; // sendRequest で background_page に送信 chrome.extension.sendRequest({action: "chgMsg", text: msg}, function(rcv) { // function(rcv) がコールバックとして受信時に発動 getMsg(rcv); }); // コールバック受信により発動 function getMsg(afterMsg) { alert("after:" +
Event Driven JavaScript - os0x.blog
document.createEventとdispatchEvent、addEventListenerを使ってイベントドリブンに書いたJavaScriptがオレブーム(ただし、IE非対応*1 )なので、軽く紹介してみたいと思います。 具体的には、AutoPatchWork (Google Chrome Dev用のextension)をイベントドリブンで実装しています。 AutoPatchWork.jsが2009/06/11 21:00時点のソース(id:nanto_viのコメントをうけて#を.に変更済み)。シンプルさを重視しているので、324行と短めです(CSSは別ファイルですが)。 window.addEventListener('scroll', check_scroll, false); window.addEventListener('AutoPatchWork.request',
Chrome Extensionsの作り方 2009/06/25版 - os0x.blog
続きは、特集：先取り！ Google Chrome Extensions｜gihyo.jp … 技術評論社 と、 連載：続・先取り！ Google Chrome Extensions｜gihyo.jp … 技術評論社をどうぞ。 用意するもの Google Chrome 3.0.190.1以降(dev版か、latest Chromium snapshotがオススメ。) 最低限必要なもの manifest.json JSON(not JavaScriptなので、値を'ではなく"で囲まないといけないなど、割と厳格なので注意)で書く拡張の定義ファイルです。 一応必須といえるのはnameとkeyの2つですが、とりあえずはnameさえあればOK。keyはパッケージするときに自動で振られるので自分で書く必要はありません。 { "content_scripts": [ { "js": [ "all.js"
Chrome Extensions API リファレンス
Bbfstoto adalah situs slot online peluang maxwin tertinggi yang bisa didapatkan dari slot gacor terbaru bergaransi. Kemenangan luar bisa dan mudah menjadi daya tarik bermain pada situs slot terbaru. Didukung dengan mekanisme peluang lebih besar hingga 70% berbanding 30% semua bisa merasakan withdraw besar. Awal mula munculnya judi slot hanya untuk kalangan menengah keatas, namun era sudah berubah
続・先取り！ Google Chrome Extensions 記事一覧 | gihyo.jp
運営元のロゴ Copyright © 2007-2025 All Rights Reserved by Gijutsu-Hyoron Co., Ltd. ページ内容の全部あるいは一部を無断で利用することを禁止します。個別にライセンスが設定されている記事等はそのライセンスに従います。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Why does @require always give me the error "couldn't load @require from forbidden URL" for local scripts on Greasemonkey/Tampermonkey on MacOS
puppeteerでよく使うであろう処理の書き方 - Qiita
GitHub - puppeteer/puppeteer: JavaScript API for Chrome and Firefox
JSのパフォーマンスをお手軽に解析する方法 - Qiita