はじめまして！ サイオステクノロジー の安藤　浩です。E2Eテストで利用されるPlaywright の入門として、インストールからコード生成、テスト実行の方法についてご紹介させていただきます。 Playwright とは Web アプリのテスト、テスト自動化が可能なNode.jsの ライブラリのことです。 特徴として以下が挙げられます。 クロスブラウザ対応 非同期処理を適切に処理して、シンプルなテストコードが書ける ブラウザ操作からコードが生成できる Visual Regression Test (VRT)に対応 ほかのE2Eテストツールは Selenium, Puppeteer, Cypressなどが挙げられ、比較対象となります。 ここからPlaywright のインストールからブラウザ操作でのテストコード生成、テスト実行、テスト実行結果の確認までご紹介します。 環境 実行環境は以下の通りです。 OS/SW Version Windows 10 Pro 22H2 VSCode 1.88.0 Node.js 20.12.2 npm 10.5.1 Playwright のインストール 対象のプロジェクトにディレクトリでPlaywright を導入したい場合、以下のコマンドを実行します。(現時点での最新バージョンは1.43.0 ) npm init playwright@latest いくつか選択肢が出てくるので、選択して初期化します。例えば、TypeScript か JavaScript でテストコードを書くかというものです。 Getting started with writing end-to-end tests with Playwright:Initializing project in '.' ? Do you want to use TypeScript or JavaScript? ... > TypeScript JavaScript ここでは以下のように設定しておきます。 √ Do you want to use TypeScript or JavaScript? · TypeScript √ Where to put your end-to-end tests? · tests √ Add a GitHub Actions workflow? (y/N) · true √ Install Playwright browsers (can be done manually via 'npx playwright install')? (Y/n) · true ファイル生成後のファイル構成は以下のようになります。 Playwright Test for VSCode というVSCodeの拡張機能があるのでこちらもインストールします。 https://marketplace.visualstudio.com/items?itemName=ms-playwright.playwright この拡張機能を利用して、 ブラウザ操作からコード生成する方法を紹介します。 ブラウザ操作でのコード生成 まず、VSCodeでTestingを表示します。VSCodeのメニューのView > Testing から表示できます。 Testingの画面下部にPlaywright の拡張機能が表示されているので、「Show browser」にチェックを入れ、「Record new」を押下します。 その時、Chromiumが起動するのでアドレスバーにテスト対象のアドレスを入力します。ここではPlaywright のホームページ ( https://playwright.dev/ )を指定します。 ページが表示されたら、赤枠の箇所を押下し、マウスカーソルを黒背景のPlaywrightの箇所に移動し押下してみます。 すると、文字列が正しいかというチェックをするアサーションの画面(Assert that element contains text)が表示されるので、赤枠のチェックボタンを押下します。 ここまででVSCode上ではtest-1.spec.ts というファイルが生成され、以下のコードが生成されています。 import { test, expect } from '@playwright/test'; test('test', async ({ page }) => {   await page.goto('https://playwright.dev/');   await expect(page.locator('h1')).toContainText('Playwright'); }); 続いて、ブラウザで画面上の「GET STARTED」ボタンを押下し、画面を表示します。 先ほど同様、赤枠の文字列のアサーションのボタンを押下し、「Installation」の箇所を押下します。 アサーションの画面(Assert that element contains text)が表示されるので、赤枠のチェックボタンを押下します。 「Introduction」の箇所も同様にアサーションを追加します。 ブラウザを閉じると最終的に以下のテストコードが生成されます。test-1.spec.ts ファイルを保存しておきます。 import { test, expect } from '@playwright/test'; test('test', async ({ page }) => {   await page.goto('https://playwright.dev/');   await expect(page.locator('h1')).toContainText('Playwright');   await page.getByRole('link', { name: 'Get started' }).click();   await expect(page.locator('h1')).toContainText('Installation');   await expect(page.locator('#introduction')).toContainText('Introduction'); }); ※テストのタイトル (ここでは’test’になっている) などは分かりやすくするため適宜変更してください。詳細は https://playwright.dev/docs/api/class-test をご参照ください。 生成されたコードによるテスト実行 以下のテストコードの箇所にテスト実行ボタンが表示されるので押下するとテストが実行されます。 テスト実行後は以下のようになり実行結果が確認できます。 すべてのテストを実行したい場合は以下のコマンドを実行します。 npx playwright test テスト結果の確認 (レポートの表示) テストが完了したら、以下のコマンドを実行することでテスト結果のレポートが表示されます。 npx playwright show-report 指定のURLにアクセスするとHTML がlocalhostで見られるようになります。 各ブラウザでのテスト状況などがわかるので便利ですね。失敗した場合のテストは失敗箇所がわかるようになっています。 まとめ Playwrightの特徴とインストール、ブラウザ操作でのコード生成、テスト実行・結果確認までご紹介しました。 ブラウザ操作でのコード生成では、正確なコードであるか検証が必要かつE2Eテストでは人間の見た目に近い操作にしたいはずなのでpage.locator でIDによる指定などはしないはずなので、コードの改良は必要だと思います。 導入も容易にできそうですし、コード生成機能がついているのでメンテナンスも比較的容易になりそうだと思います。 ご覧いただきありがとうございます！ この投稿はお役に立ちましたか？ 役に立った 役に立たなかった 0人がこの投稿は役に立ったと言っています。 The post Playwright 入門 – インストール、ブラウザ操作でのコード生成、テスト実行 first appeared on SIOS Tech. Lab .

今回はSBOMツールの一つである「bom: The SBOM Multitool」について解説します。SBOMについてよく分からないという方は、まず こちら の記事を読んでみてください。 bomとは ソフトウェア部品表 (SBOM) を作成、表示、変換できるユーティリティ Kubernetes プロジェクトの SBOM を作成するプロジェクトの一部として作成された ディレクトリ、コンテナー イメージ、単一ファイル、およびその他のソースから SPDX パッケージを生成できる汎用ツール SPDX カタログ内の 400 以上のライセンスを認識するライセンス分類子が組み込まれている Golang の依存関係分析や、 .gitignore  Git リポジトリのスキャン時の完全なサポートなどがある 環境 OS、ツール バージョン Ubuntu 22.04 GO 1.21.4 bom 0.6.0 インストール GOプロジェクトなので、下記のコマンドでインストールします。 go install sigs.k8s.io/bom/cmd/bom@latest バージョンを確認します。 bom version 走査対象 JavaでWebアプリケーションを作成する際に使用される Tomcat を対象とします。 SBOMの生成 すべての SPDX ドキュメントは、名前空間を宣言する必要がありますが、今回は全て「http://example.com/」と指定しています。 YAMLファイルからBOMの作成 今回はこちらは省略します。興味のある方は 公式ドキュメント を参照してください。 現在のディレクトリからSBOMを作成 generateコマンドにoオプションで出力ファイル名、formatオプションでJsonを指定します。 bom generate -n http://example.com/ -o tomcat-spdx.json --format json . コンテナイメージから生成 generateコマンドにiオプションでコンテナイメージを指定します。 bom generate -n http://example.com/ -i tomcat:11.0 -o tomcat-image-spdx.json --format json 特定のファイルのみを対象としたい場合 generateコマンドにfオプションでファイル名を指定します。 bom generate -n http://example.com/ \ -o tomcat_spdx.json --format json \ -f java/org/apache/tomcat/JarScannerCallback.java \ -f java/org/apache/tomcat/SimpleInstanceManager.java その他のオプションについては 公式ドキュメント を参照してください。 SPDXドキュメントの構造を描画 documentコマンドにoutlineを指定します。 bom document outline tomcat-spdx.json オプションは 公式ドキュメント を参照してください SBOM 内の情報を検索 documentコマンドにquery、SPDXファイル、検索条件を指定します。 bom document query tomcat-spdx.json "depth:2 name:log4j" depthは深さ、nameは検索したい要素を正規表現で指定できる 成果物を sbom と照合してチェックする validateコマンドとして用意されていますが、こちらは開発中のため今回は省略します。 さいごに 今回はSBOMツールの一つである「bom: The SBOM Multitool」について解説しました。まだメジャーリリースが行われていないので、本来の目的であるKubernetes プロジェクトの SBOM を作成する機能はないですが、興味のある方は試してみてください。 ご覧いただきありがとうございます！ この投稿はお役に立ちましたか？ 役に立った 役に立たなかった 0人がこの投稿は役に立ったと言っています。 The post SBOMツール紹介 ~ bom: The SBOM Multitool編 ~ first appeared on SIOS Tech. Lab .