【Playwright⑤】ファイルアップロードのテスト (Actions)
ファイルアップロード機能のテストは、ウェブアプリケーション開発において重要なステップの一つ。特に、ユーザーが正しくファイルをアップロードできるかどうか、複数ファイルのアップロードやファイルクリア操作が正常に動作するかを確認する必要がある。この記事では、Playwrightを使ってファイルアップロー
Ei2faJSDbTPC
記事一覧
記事数
156
【Playwright④】DOM操作を効率化するテクニック (Actions)
Playwrightを使ったテスト自動化では、DOM操作が重要なステップとなる。Playwrightの強力な「Actions」機能を使うことで、DOM要素に効率的かつ正確にアクセスし、操作が可能。本記事では、DOM操作を効率化するためのテクニックを紹介する。具体的には以下のDOM操作に焦点
【Playwright③】 効率的なDOM要素のアクセス方法(Locators)
Playwrightを使ったエンドツーエンド（E2E）テストでは、DOM要素へのアクセスが重要なステップとなる。Locatorsは、Playwrightが提供する強力なツールであり、これを使って正確かつ効率的にDOM要素を操作できる。本記事では、PlaywrightのLocatorsについて詳しく
【Playwright②】認証の自動化 | E2Eテスト
エンドツーエンド（E2E）テストを行う際、認証は避けて通れない課題の一つ。特に、複数のテストケースで毎回ログインを行う必要があると、テストの実行時間が増え、効率が低下する。しかし、Playwrightを使えば、この認証プロセスをキャッシュして使い回すことが可能になる。本記事では、Playw
【Playwright①】E2Eテストの基礎とセットアップ手順
実務のプロジェクトにて「Playwright」をがっつり触る機会があった。これから複数の記事に分けてエンドツーエンド（E2E）テストのノウハウを解説していく。この記事では、まずPlaywrightとは何か、E2Eテストの重要性、Playwrightを既存のプロジェクトにインストールし、サンプルテス
【Nuxt3】nuxtjs/sitemapを使用してXMLサイトマップを生成する方法
この記事では、Nuxt 3を使ってnuxtjs/sitemapモジュールを導入し、XMLサイトマップを生成する方法を解説する。これにより、検索エンジンがサイトのコンテンツを効率的にクロールできるようになる。前提Nuxtのバージョン: 3.xNode.jsのバージョン: 1
【Express】IAMの一時的な認証情報（STS）を使用してS3にアクセスする
この記事では、ExpressアプリケーションからAWSの一時的な認証情報（STS）を使用してS3にアクセスする方法を解説する。IAMロールを利用した一時的な認証情報の取得から、取得したクレデンシャルを使ってS3バケットにアクセスするまでの手順を具体的に示し、AWSリソースを操作する方法を紹介する。
DockerイメージをGithub ActionsからAWS ECSに自動デプロイする手順
この記事では、GitHub Actionsを使ってAmazon ECSへの自動デプロイを行う手順を解説する。GitHub ActionsからAWSへの安全な接続方法、ECRへのコンテナイメージのプッシュ、ECSサービスの更新までの一連のプロセスを具体的に示し、効率的なCI/CDパイプラインの構築方
Next.jsでMilkdownを使ったマークダウンエディタの開発
この記事では、Next.jsとMilkdownを使用してカスタムマークダウンエディタを開発する方法を紹介する。Tailwind CSSを使用してスタイルを適用し、Material-UIのコンポーネントでユーザーインターフェースを構築する。ちなみに、Next.jsバージョンは14.0.3公式
【Express.js】AWS SDKを使用したS3へのファイルアップロードと署名URLの取得
この記事では、Express.jsを使用してAWS SDKを利用し、S3バケットにファイルをアップロードする方法と、署名付きURL（Presigned URL）を生成する方法を紹介する。全体像実装の流れパッケージインストール環境変数設定S3に接続す
【Express.js】AWS SESを使用した自動返信メール機能の実装手順
この記事では、Express.jsアプリケーションでAWS SES（Simple Email Service）を使用して自動返信メール機能を実装する手順を説明する。参照ソース: https://docs.aws.amazon.com/ja_jp/sdk-for-javascript/v3/
【Express.js Cognito】アクセストークン検証用の認証ミドルウェアを実装する
この記事では、Express.js アプリケーションに AWS Cognito を使用し、アクセストークンを検証する認証ミドルウェアの実装方法を説明する。AWS Cognito はセキュリティが強固で広く使用されている認証サービスであり、Webアプリケーションやモバイルアプリケーションでのユーザー
【Express.js】AWS SDKを使用したCognito認証処理（ログイン、トークン更新）
Express.jsアプリケーションにて、「AWS SDK for JavaScript V3」を使用して認証処理を実装する方法を記載する。今回は、usernameとpasswordを使用したログイン処理を事例に解説する。環境{ "dependencies"
【Express/MongoDB/Docker】DB接続、データ登録・取得手順
前回の記事「DockerとExpress.jsを用いたアプリをElastic Beanstalkにデプロイする手順」では、Express.jsを使用してシンプルなWebアプリケーションを開発し、それをDockerでコンテナ化する手順を解説した。今回は、ExpressアプリとMongoDBを
DockerとExpress.jsを用いたアプリをElastic Beanstalkにデプロイする手順
本記事では、Node.jsのフレームワークであるExpress.jsを使用してシンプルなWebアプリケーションを開発し、それをDockerでコンテナ化した後、AWSのElastic Beanstalkを使ってデプロイする一連のプロセスを解説する。環境"express&qu
【Redux Toolkit】非同期データ取得、保持、加工をStoreに集約する
シングルページアプリケーションの開発に際し、データの取得、保持、加工をストアに任せる設計を経験した。実際に経験したのはNuxt3のPiniaだが、ReactのReduxでも同じことができるだろうということで忘備録として記録する。参考にしたRedux公式ドキュメント: 『Redux Esse
サーバーとクライアントでReduxを連携する方法【Next.js14】
環境"typescript": "^5""next": "14.0.3","react": "^17.0.0 || ^18.0.0","react-dom
【Next.js14】「Redux」を使って状態管理を実現する手順
この記事では、Next.jsとTypeScriptを使用して、ページを跨いだ状態管理ができるReduxの実装方法を説明する。参考にした公式ドキュメント: https://redux.js.org/usage/nextjs環境"typescript": &
Next.jsでライブラリを使用せずにXMLサイトマップを生成する方法
この記事では、Next.jsを使用してライブラリを使わずにXMLサイトマップを生成する方法と、サイトマップの各要素がSEOにどのような役割を果たすのかについてアウトプットする。開発環境"next": "14.1.0","react
【Next.js14】Middlewareを使用して未認証ユーザーをログイン画面にリダイレクトさせる方法
Next.jsのMiddlewareは、リクエストが完了する前にコードを実行する機能である。今回は、リクエストが完了する前にユーザーの認証状態をチェックし、未認証の場合はログイン画面にリダイレクトさせる処理を実装した。私はAWS Amplifyを使用してアプリケーションを開発しているが、a
