タイトルの通り、Chromeのページ内検索で正規表現を使いたい、んですが、今までずっとむず痒さを覚えつつも放置してました。
使いたいケースは主にgithub上でコード読むとき。今まで正規表現で検索したいときはローカルにチェックアウトする、っていう無駄なことしてました。 (リポジトリからコードを探すときはgithubの機能で正規表現で検索できますが、今見てるファイル内を検索したいときに困っていました)
あと、Chromeの検索は大文字小文字区別しないので困ります。
そんなんextention作ってくれてる人いるだろう、と思ったら案の定ありました。ありがとうございます。
https://chromewebstore.google.com/detail/chrome-regex-search/bpelaihoicobbkgmhcbikncnpacdbknn
Firefoxは昔ブラウザ標準の機能で正規表現検索機能あったと思うんだけど少なくとも今はなさそう。大文字小文字の区別はできます。
Playwright + reg-suitでビジュアルリグレッションテスト - なんじゃくにっき
の続き
npx playwright codegen
とするとブラウザが立ち上がって、そこで操作するとその操作がインスペクタにテストコードとして記述される。
それをコピーしてきてspecファイルにペーストすれば良い。
↓はブラウザのアドレスバーにgootle.comとして遷移してからロゴをクリックしたときのキャプチャ。
認証など各テストに共通する前処理をしたい場合
Playwright + reg-suitを使ってビジュアルリグレッションテストをやってみます。
E2Eテストでスクリーンショットを撮って前回との比較をします。
今回の実行環境はUbuntuですが、MacやWindowsでも多少やり方が違いますができますので公式ドキュメントにまず目を通しましょう。
に従ってインストールします。
事前にnodeはインストールしておくこと。
npm init playwright@latest
実行中にいくつか選択肢がでますがほぼデフォルト値で決定しました。
github actionsだけ今回は使う気がなかったのでNoを選択。
依存ライブラリをインストールします。
一旦chromiumで実行するためのものだけにしておきます。
--with-depsオプションをつけなければfirefoxとwebkitで実行するためのものもインストールされます。
npx playwright install --with-deps chromium
npx playwright test
とするとtestsディレクトリ以下のテストが実行されます。
デフォルトでexample.spec.tsができているのでそれが実行されます。
実行が終わるとサーバーが起動して
で結果が見られます。
テストが2つ x ブラウザ3種類の6つのテスト結果が表示されます。
chroniumの依存ライブラリしかインストールしていないのでwebkitとfirefoxのテストが失敗しています。
また起動したサーバーをCtrl + Cで止めたあとでも
npx playwright show-report
で最後の結果を表示できます。
デフォルトだとheadlessで動作しますが目に見えるブラウザを起動したいときは
npx playwright test --ui
https://playwright.dev/docs/browsers#configure-browsers
playwright.config.ts を編集してfirefoxとwebkitの部分をコメントアウトすればOK
iPhone表示にはwebkitが必要です(iPhoneのシミュレーターではなく)
npx playwright install --with-deps webkit
したあとに
playwright.config.ts
npx playwright test --project chromium
--projectオプションを使う
npm install --save reg-suit
npx reg-suit init
どのプラグイン使うか聞かれるので一旦は全部外す
test/example.spec.ts
test('Take photo', async ({ page }) => {
await page.goto('https://playwright.dev/');
await page.screenshot({ path: './ss/example.png', fullPage: true });
});
スクリーンショット撮ることはできましたが毎回出力先が同じだと毎回上書きされて残らないので、実行日時 + ブラウザのディレクトリに残るようにします。
npm install --save dayjs
test/config.ts
import { test as base } from '@playwright/test';
import dayjs from 'dayjs';
export type TestOptions = {
ssDir: string;
};
export const test = base.extend<TestOptions>({
ssDir: './ss/' + dayjs().format("YYYYMMDDhhmmss") + "/",
});
test/example.spec.ts
import { expect } from '@playwright/test';
import { test } from './config';
test('Take photo', async ({ page, ssDir }, info) => {
const fileName = "top.png"
await page.goto('https://playwright.dev/');
await page.screenshot({ path: ssDir + info.project.name + "/" + fileName , fullPage: true });
});
2回実行してssディレクトリの下に2つディレクトリができているとすると
npx reg-cli ./ss/20240222022952/ ./ss/20240222022438/ .diff -R ./report.html
みたいにすると差分が検出されます。
CLIに変化があったファイルが表示されますがレポートもreport.htmlに出力されます。
差分表示例(赤く見える場所が差分)
DIR1=`ls -A ./ss | sort | tail -2 | head -1`
DIR2=`ls -A ./ss | sort | tail -1`
npx reg-cli ./ss/${DIR1} ./ss/${DIR2} .diff -R ./report.html
open ./report.html
毎回ディレクトリ指定するのは面倒なので最後の2つを比較しましょう。
github actionsを使ってgithubで特定のブランチに変更されたときにheadlessでテスト走らせて検知、みたいなこともできますが、今回は任意のタイミングで実行したかったのでやってません。
画像ファイルをS3にアップロードできますが今回はやっていません。(やる場合はreg-publish-s3-pluginを使えばよさそう)
ビジュアルリグレッションテストとは画像を取得して正解画像と比較するテスト
ビジュアルリグレッションテストをE2Eテストの一環として行えるSaaSはいくつかあって、SaaSの利点としては
と言う点が挙げられます。
逆に欠点としては - まだ値段が高い - あくまでもサービスとして提供されている機能しか使えず、カスタマイズが自分でできる範囲が限られる
ということがあります。
お値段はそこそこするので個人プロジェクトで使うには厳しいですね。 もっとマーケットが広がって規模の原理でお値段下がるのを期待。
逆に仕事で使うならインフラの保守、テストケースの保守なども考えるとかえってコスト削減が期待できます。
それぞれちょっとずつ触らせてもらったことがあります。
価格はだいたいどこもお問い合わせ。
各サービス頻繁に機能追加されていて現状は異なっている可能性があるので鵜呑み厳禁。
E2EのSaaSで世界的に見て一番有名なのはここじゃないかな。
除外領域の設定もできるのが面白い。
https://university.mabl.com/ja-visual-testing/12261
機械学習ベースでビジュアルリグレッションテスト動かしているのが面白い。
DataDogは監視＆分析のSaaSなんですが、ブラウザテストも機能の1つとしてあります。
スクリーンショットを撮る機能はある（というかデフォで各ステップで撮られる）んですが、ビジュアルリグレッションテストなさそう。
https://docs.datadoghq.com/ja/api/latest/synthetics/#get-a-browser-test
E2E回したあとにAPI経由で画像を取得してreg-cliで比較するプログラムを組めばビジュアルリグレッションテストできなくはなさそうです（試してない）
最近流行りのものだとPlaywright + reg-suitじゃないかなーって思います。
Ubuntuでターミナルにguakeを使っているんですが、
Ubuntuのバージョンを20.04から22.04にアップデートしてから、Firefoxなどのアプリにフォーカスが当たっていると F12キーでのguakeのトグルが効かなくなくて困っていました。
別のアプリに切り替えると効くのでguakeを起動するのに今まで1アクションだったのが2アクションになっていました。
たまたま解決策を見つけました。Gnome Settingからショートカットの設定でできました。
https://askubuntu.com/questions/1331707/f12-acting-weird-in-21-04-can-no-longer-toggle-guake
noteに移動しました
2023年度確定申告、所得税の納付まで済ませました。
今年は給与収入はなく、事業収入のみの個人事業主です。
去年の自分の記事を掘り起こしてくると、去年はスマホでやったらしい。
2022年度確定申告をスマホでやってみた - なんじゃくにっき２
今年はPCでやりました。OSはUbuntu、ブラウザはFirefoxです。
User agent偽装しているので真似する人は自己責任でお願いします。
仕訳の入力は年明けてからやるより事前に済ませたほうが良い。
面倒なのが請求書、領収書などを会計ソフトに添付ファイルとして入力していくところ。
これを大体年末に済ませました。
一部のサービスでは2023/10以降の請求書がインボイス対応で形式が変わっていたりした。
一部仕訳が年内に確定しないので、年明けてからも少し入力。1/15が最後でした。
控除証明書の類が全部集まってから確定申告書の作成を行ったほうが楽です。作成途中で中断するのが面倒なので。
この手のものは1/23に国民健康保険料年間納付済額のお知らせが来たのが最後でした(去年は届かなくて電話した)。
あと、年金の通知は11月分までしか載ってなかったので自分で計算する必要がありました。
確定申告書等作成コーナーからスタート。
去年は作成始めてから何回か必要なものが足りてないのに気づいて中断、 再開したりしてたので都度マイナンバーカード読み込んだりが面倒だったが、 今回は学習していたので一発で終えた。
医療費は連携されたが控除されるほどの金額ではないのであまり意味はない（去年も同様だった）。
国民健康保険料は今年も連携されなかったです。
金融機関と連携できるみたいだが譲渡所得等は昨年中に売ったものがないのでなし。
会計ソフトから数字をコピペで入力すると改行などの制御文字が入るのか、validation通らないことが多いので結局手打ち・・
input側で取り除いてくれると嬉しいんですが。
決算書の作成が終わると引き続いて確定申告書の作成
ここでは入力することは控除をちょっと入力するだけでさくっと終わり。
そのままe-taxで申告終わり。
納付はペイジーで行いました。手数料ゼロだしね。
メインのインターネットバンクがペイジー対応していなくて、別の銀行の口座に送金してそっちから納付。
納付するのに4つの番号が必要で
とあるが、納税用確認番号ってなんだと思ったらe-tax利用開始時に自分で設定するものらしい。
が、そんなもの覚えてないのでどうするのかと思ったら”受付システム”から再設定できた。
”受付システム”はマイナンバーカードさえあればログインできる。
毎回納税の度に再設定しても良いかもしれないと思いました。
納税用確認番号を忘れてしまいました。どうすればいいですか。| 【e-Tax】国税電子申告・納税システム(イータックス)
金額の入力は不要で、上記4つの番号が揃っていれば金額は自動で入力されている。
Ruby製のmigration toolのRidgepole話。
これの動作が遅かったので調査した。
OSにdiffコマンドがないと遅くなる
Gemfile経由でインストールして
bundle exec ridgepole -c config.yml --apply
としたときに動くものの実体は
https://github.com/ridgepole/ridgepole/blob/2.0/bin/ridgepole
なので、このbin以下にあるファイルを実行環境にコピーしてきてprofilerを入れる(今回はruby-profを使いました)
で、実行時間を食っている場所を探していくと、
RidgepoleがさらにDiffyというライブラリを呼んでいて、
これがOSのdiffコマンドを叩くところで時間を食っていることが分かった。
diffy/lib/diffy/diff.rb at 85b18fa6b659f724937dea58ebbc0564f4475c8c · samg/diffy · GitHub
これでOSにdiffコマンドをインストールしてあげれば解決。
CentOS系とかだと入ってないことがあって
$ sudo yum install diffutils
とか
$ sudo dnf -y install diffutils
でインストール。
※間違って消してしまったので復旧しました
MySQLのクライアントとしてMacではSequel Pro -> Sequel Aceを使っていたんですが、
LinuxやWindowsでは永らくCUIからmysqlコマンドで操作するという原始的な方法を取っていました。
流石にGUIクライアントもほしいなと思ってDBeaverというのを探してきました。
インストールは公式のダウンロードページに従います。
OS毎に手順が違うのでここでは割愛します。
Linux, Mac, Windowsとマルチプラットフォームで動くし主要RDBMSで動くし割と良さげです。
Postgresqlの場合もpgadminから乗り換えるかも・・
MySQLやPostgreSQLなどを趣味や仕事で使っています。
Linux環境でDBクライアントは今まで標準のCUIを使っていましたが、ちょっとGUI欲しくなって探しました。
MacだとSequel Proを使っていましたがそっちも最近開発が盛んでない（or止まった）ようで・・
DBeaverというものを使い始めました。
DBeaver Community | Free Universal Database Tool
環境は Untuntu 22.04
Jave(JRE)はすでにインストールされている前提。
curl -fsSL https://dbeaver.io/debs/dbeaver.gpg.key | sudo gpg --dearmor -o /etc/apt/trusted.gpg.d/dbeaver.gpg echo "deb https://dbeaver.io/debs/dbeaver-ce /" | sudo tee /etc/apt/sources.list.d/dbeaver.list sudo apt update && sudo apt install dbeaver-ce
これで
dbeaver
で立ち上がる。
初回起動時にjdbcライブラリを自動でダウンロードしてくれるので便利。
