Rails 7 で React & TypeScript を導入する方法（tsx, esbuild, jsbundling-rails） - LEFログ：学習記録ノート
※この記事では「新しくRails 7 アプリを作成するときのこと」を想定していますが、Rails 6を7に上げるときにもそれなりに役立つ情報だと思います！ 結論 rails newのときにesbuildを指定してあげれば、あとはJavaScriptファイルや.jsxファイルを、.tsxにしてあげるだけでOK。 型チェックや構文チェックを導入するには少し注意が必要。 概要 現在、Rails 7を使ってフロントエンドを構築する方法には、大きく分けて３種類あります。 importmapsを使って、素のJavaScriptを使ってフロントエンドを作る esbuildを使って、JSXファイルを使ってフロントエンドを作る Rails 7をAPIモードにして、フロントエンドはNextjsで作る 自分はこの２番めの「esbuildを使ってフロントエンドを作る」を選択しました。理由は、Railsのslim上
Rails7時代のJS/CSSバンドルの新常識 – <hazm.jp />
Rails7では、jsをバンドルせずにimportmapでjsを直接読み込む方式がデフォルトとなりました。しかしwebpack等でのバンドル方式の選択肢を完全に失ったわけではありません。特定のターゲット（ES5など）にトランスパイルすることができます。レガシーブラウザをサポートする要件下ではバンドル方式を選択することもあるでしょう。そこで来たるRails7時代に、我々アプリケーションエンジニアにとってどのような手段があるのか、Railsの基礎知識をアップデートしていくのがこの記事の目的になります。早速始めましょう！ JSの読み込ませ方 かつてのRailsではSprocketsでバンドルして単一のjsファイルとして配信する方法が常識でした。Sprocketsはトランスパイルはしないものの、minifyする仕組みを持っていました。 Rails7からは、importmapまたはwebpack/e
WebAssembly入門 ─ Webフロントエンドの現実的なユースケースを知り、Wasm製アプリケーションを体験してみよう！｜ハイクラス転職・求人情報サイト AMBI（アンビ）
ハイクラス求人TOPIT記事一覧WebAssembly入門 ─ Webフロントエンドの現実的なユースケースを知り、Wasm製アプリケーションを体験してみよう！ WebAssembly入門 ─ Webフロントエンドの現実的なユースケースを知り、Wasm製アプリケーションを体験してみよう！ WebAssembly（Wasm）は、ブラウザー上で直接動くプログラミング言語として、JavaScriptを置き換える期待が寄せられますが、実際にWasmが果たすべき役割や適したユースケースとはどういったものでしょうか？ Wasmの動作を体験するチュートリアルとあわせて、山本悠滋（igrep）さんが解説します。 WebAssembly（以下、略称の「Wasm」と呼びます。「キャズム」や「～イズム」などからの類推なのか「ワズム」と発音するようです）とは、ブラウザーをはじめとするさまざまな環境で動作する、仮想マ
RxJS入門 | 第1回 RxJSとは
RxJS入門 第1回 RxJSとは RxJSは、リアクティブプログラミングという考え方のもとに構築されているライブラリです。「いつ起こるかわからない処理」の扱いを、一貫性を持って書くことができます。 まずはコード例で、その感触をつかんでみてください。 はじめに 今シリーズではRxJSを紹介します。RxJSとは、端的にいうとJavaScriptでのイベントのハンドリングや非同期処理をラップし、扱いやすくするためのライブラリです。 このライブラリは、もともと2009年にマイクロソフト社によってC#用に開発されたRx.NETというライブラリのJavaScript向けの移植で、他にもRxの名を冠するライブラリがさまざまな言語向けに移植されています。そのため、RxJSを学ぶと他の言語向けのRx利用者とも同じ土俵で会話ができるという、おもしろい背景を持っています。 いつ起こるかわからない処理 Java
JavaScriptのバンドルとトランスパイルが不要なモダンWebアプリ | POSTD
筆者はES6以前のVanilla JSがあまり好きではありませんでした。 そこで、バニラJavaScriptをなるべく書かなくていいように、2000年代を通じてさまざまなアプローチを追求してきました。最初はRJS（Ruby-to-JavaScript）、次はCoffeeScriptでした。どちらのアプローチも、バニラJavaScriptより楽しく書けるソースコードを、ブラウザが実行できるバージョンのJavaScriptへトランスパイルするものです。ある程度は、うまくいっていました。 とはいえ、これは明らかにその場しのぎの手段に過ぎず、ブラウザがより洗練されたJavaScriptを理解できる日を待ちわびていたのです。ただ、そんな日が来ることはなく、永久にその場しのぎでやり過ごすのかと思われる時期がしばらく続きました。 しかし、幸いなことにJavaScriptは改善を続け、2015年にはES6
The Selenium Browser Automation Project
Selenium is an umbrella project for a range of tools and libraries that enable and support the automation of web browsers. It provides extensions to emulate user interaction with browsers, a distribution server for scaling browser allocation, and the infrastructure for implementations of the W3C WebDriver specification that lets you write interchangeable code for all major web browsers. This proje
Selenium
Registrations open for Selenium Conf 2024 online - live on 21 June. Register now! Selenium automates browsers. That's it!What you do with that power is entirely up to you. Primarily it is for automating web applications for testing purposes, but is certainly not limited to just that. Boring web-based administration tasks can (and should) also be automated as well. Selenium WebDriver If you want to
8月にリリースされたFirefox 55以降ではSelenium IDEが動作せず、Seleniumオフィシャルブログで報告。今後の方向性は？
8月にリリースされたFirefox 55以降ではSelenium IDEが動作せず、Seleniumオフィシャルブログで報告。今後の方向性は？ 8月9日にリリースされたFirefox 55ではSelenium IDEが動作しなくなっていることが、8月9日付けの「Official Selenium Blog」に投稿された記事「Firefox 55 and Selenium IDE」で報告されています。 Selenium IDEとは、ブラウザ自動化ツールSelenium関連のソフトウェアのひとつ。ブラウザの操作をコマンドとして記録することができ、それをテストケースとして再利用できるというツールです。Webアプリケーションのユーザーインターフェイス周りのテストなどで便利に使われてきました。 Firefox 55で動作しなくなった原因は、Firefoxの拡張機能の仕組みが従来の「XPI」から、We
🤖 NEW: Selenium IDE for Chrome/Firefox (Open-Source) plus additional features = Kantu , iMacros alternative
Desktop Automation Web Automation Screen Scraping UI Testing Test Automation Made Easy Join 100,000+ users and automate workflows on your desktop and in the browser. Get started: Install the free browser extension! Easy automation for busy people. The UI Vision free RPA software (formerly Kantu) automates web and desktop apps on Windows, Mac and Linux. UI.Vision RPA is a free open-source browser e
Firefoxアドオンを使った簡易自動テストの応用編２（Katalon Recorder）
１．はじめに 以前、最新版でも動作するSelenium IDEベースのアドオンである「Katalon Recorder」の紹介と 応用編１としてコマンドの説明を投稿させてもらいましたが、今回はデータにCSVファイルを 使ったやり方を紹介したいと思います。 ※以前の記事は、以下を参照 Firefoxアドオンを使った簡易自動テスト Firefoxアドオンを使った簡易自動テストの応用編１（Katalon Recorder） ※ブラウザはFirefoxを使います。 ２．CSVファイル作成 簡単ではありますが、お試し用にCSVファイルを作成します。 お試しという事で以下の様なCSVファイル（sample.csv）を用意してください。 NO 項目 データ 001 テスト１ １つ目のテストデータ 002 テスト２ ２つ目のテストデータ 003 テスト３ ３つ目のテストデータ 実際のファイルの内容は、以下
Seleniumで、メール受信のテストをする方法 - Qiita
ウェブサービスで、会員登録やらパスワード再設定やらで確認用メールを飛ばして一時URLをクリックして処理が完了する機能って、よくありますよね？ その機能を自動テストしたいとき、どうやってますか？ 実はSeleniumとGmailの「簡易HTMLモード」を使えば簡単にできるんです。 Gmailでテスト用のアカウントを作っておく(例: example@gmail.com) Seleniumで、当該ウェブサービスに会員登録する Gmailに会員登録の一時URLが入ったメールが送られてくる Seleniumで、Gmailを開いてその一時URLをクリックする GmailはAjaxサイトなので、自動操作するのは一見難しそうですが、下記のようにすればできます。 Gmailを自動操作する方法 まず、Gmailにログインする直前にログアウト用URLを叩いておきます。 コマンド 対象 値
Selenium のコマンド — Selenium 日本語ドキュメント
Selenium のコマンド¶ しばしば selenese とも呼ばれる Selenium のコマンドは、テストを実行するコマンドのことです。これらのコマンドを並べたものが テストスクリプト を構成します。この章では、Selenium のコマンドについて詳しく取り上げ、Selenium を使って Web アプリケーションをテストするためのさまざまな方法を示します。 ページの要素の検証¶ ページ上の UI 要素の検証は、自動化されたテストではおそらく最もよく使われる機能でしょう。Selenese では、UI 要素をさまざまな方法でチェックすることができます。実際のテスト対象はどの方法を使うかによって左右されるので、これらの方法の違いを理解することが重要になります。 たとえば、現在テストしようとしているのは、次のどれでしょうか。 ある要素がページ上のどこかに存在しているかどうか。 特定のテキス
Firefoxアドオンを使った簡易自動テストの応用編１（Katalon Recorder）
以前、最新版でも動作するSelenium IDEベースのアドオンである「Katalon Recorder」を 紹介したと思いますが、その応用編１としてコマンドの説明を行いたいと思います。 ※以前の記事は、以下を参照 Firefoxアドオンを使った簡易自動テスト ※slinkdev.secioss.net環境を使ってサンプルを作成して説明しています。 ※ブラウザはFirefoxを使います。 簡単ではありますが、よく利用しそうなコマンドを紹介します。 基本 一般的なものなので、その他については自動登録機能を使って確認してください。 URL先のページを開く 例は、slinkdev.secioss.net環境の管理画面を開いた場合 Command Target Value
【自動化】Katalon Recorderのご質問に答えます【RPA】 - 日々の生活をがんばるブログ
こんにちは。okometsubuです。 本ブログでたった2回しか扱っていない「Katalon Recorder」という記事があるのですが、なぜか微妙な人気がある謎コンテンツだったりします。 これは何かというと、Webブラウザの操作を自動化してくれるアドオンで簡単なプログラムも組むことが出来る簡易自動化ツールとなっています。以下過去記事。 okometsubulog.hatenablog.com こっちはもう少し具体的に書いたやつ。サンプルシナリオとして参考にできるかもしれないし、出来ないかもしれない。 okometsubulog.hatenablog.com アクセス数が多いってことは、つまり、世の中「自動化」が進んでいるということです。もしかしたら仕事でも使われており、今後自動化は避けられない課題となるとかならないとか、そういう想像が膨らんでしまいます。 あぁ、そうなったら仕事首になる可
Selenium IDE コマンドリファレンス (2019/09版 : Selenium IDE v3.12.0 [全96コマンドを徹底解説]) - Qiita
Selenium IDE コマンドリファレンス (2019/09版 : Selenium IDE v3.12.0 [全96コマンドを徹底解説])SeleniumテストTravisCISeleniumIDEテスト自動化 はじめに 10分でわかるブラウザ処理自動化！初心者向けSelenium IDE入門ガイドでSelenium IDEを使い始めるためのガイドを書きました。 そこでは、条件分岐やループ処理など一部のコマンドについての解説を書きました。 本記事では v3.12.0(2019/09時点での最新)のコマンド全部をサンプルコード を書きながら解説しています。 今回作成したサンプルコードはGithubに置いています。 https://github.com/RustyNail/SeleniumIDEDemo の SeleniumIDEcommand.sideをインポートすれば実行できます。
![Selenium IDE コマンドリファレンス (2019/09版 : Selenium IDE v3.12.0 [全96コマンドを徹底解説]) - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/ad4dbf0b6bbfcaced643d59d7a13d98d54745b66/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-412672c5f0600ab9a64263b751f1bc81.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9U2VsZW5pdW0lMjBJREUlMjAlRTMlODIlQjMlRTMlODMlOUUlRTMlODMlQjMlRTMlODMlODklRTMlODMlQUElRTMlODMlOTUlRTMlODIlQTElRTMlODMlQUMlRTMlODMlQjMlRTMlODIlQjklMjAlMjAlMjgyMDE5JTJGMDklRTclODklODglMjAlM0ElMjBTZWxlbml1bSUyMElERSUyMHYzLjEyLjAlMjAlNUIlRTUlODUlQTg5NiVFMyU4MiVCMyVFMyU4MyU5RSVFMyU4MyVCMyVFMyU4MyU4OSVFMyU4MiU5MiVFNSVCRSVCOSVFNSVCQSU5NSVFOCVBNyVBMyVFOCVBQSVBQyU1RCUyOSZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZ0eHQtY29sb3I9JTIzMjEyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTU2JnM9MjA4ZjdiYjE0YjgwM2IyMTA4NzgwNDVjZmU1NTgzYzk%26mark-x%3D142%26mark-y%3D57%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDBvaF9ydXN0eV9uYWlsJnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9MzYmdHh0LWFsaWduPWxlZnQlMkN0b3Amcz00YjhiNzgzZjQ5NzhiMDgyY2FhY2VhOWRiM2Q2MGE0Nw%26blend-x%3D142%26blend-y%3D436%26blend-mode%3Dnormal%26txt64%3DaW4g44Oq44Kz44O8SVTjgr3jg6rjg6Xjg7zjgrfjg6fjg7PjgrrmoKrlvI_kvJrnpL4%26txt-width%3D770%26txt-clip%3Dend%252Cellipsis%26txt-color%3D%2523212121%26txt-font%3DHiragino%2520Sans%2520W6%26txt-size%3D36%26txt-x%3D156%26txt-y%3D536%26s%3D8497e65edcc32e6e9a67a784aa1763ed)
【Selenium IDE】不定期に現れるポップアップを条件分岐で処理 - nyanco! ブログ
作成するプロジェクト 今回作るRPAプロジェクトは、ページにアクセスすると不定期で現れるポップアップ（モーダルウィンドウ）を条件分岐で処理してやろうというプロジェクトです。 うざい広告ウィンドウ対策などに使えますね。 動作は簡単に書くと以下となります。 任意のページを開くモーダルウィンドウの数を変数に格納変数の値で条件分岐させる プロジェクト内容 プロジェクトの完成形は▼こちらです。 以下、コマンドごとに解説していきます。 1.【open】 TargetのURLを開きます。 Command：open（コマンド）Target：https://blog.nyanco.me/data/labo/html/（任意のURL）Value：なし 2.【store xpath count】 Targetに不定期に現れるモーダルウィンドウをXPathで指定し、要素が見つかればその数を格納する変数名をValu
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
RxJS
GitHub - SeleniumHQ/docker-selenium: Provides a simple way to run Selenium Grid with Chrome, Firefox, and Edge using Docker, making it easier to perform browser automation
UI.Vision RPA
Selenese (Selenium IDE) Commands Reference | Katalon Docs