【技術やってみた】Next.jsでのダイアログ表示動作テスト用アプリケーションを作成した

概要

E2Eの自動テストツールPlaywrightで、ダイアログ表示を含む画面のテストを実施したいので、サンプルアプリを作成した。

環境

・Mac OS Sonoma 14.4
・Visual Studio Code 1.73.1
・Node.js 20.12.0
・Next.js 14.1.4

前回記事でインストールしたNext.jsのサンプル環境を修正して、アプリを作成した。
【技術やってみた】Next.js 14のサンプルWebアプリケーションをMacで実行してみた

実行内容

前回インストールしたサンプルアプリのフォルダ構成に対して、以下を実施。
・page.tsxを修正

"use client";

export default function Home() {

const getData = async () => {

if(confirm("OK?")){

window.location.href = "http://localhost:3000/after";

}else{

console.log("nokey.");

}

};

return (

<>

<div>ダイアログ確認画面</div>

<button className="button" onClick={getData}>ダイアログ表示</button>

</>

);

}

・after/page.tsx を作成

"use client";

export default function Home() {

const backTop = async () => {

window.location.href = "http://localhost:3000/";

};

return (

<>

<div>移動後画面</div>

<button className="buttonafter" onClick={backTop}>移動後のページです。移動前のページに戻る</button>

</>

);

}

・global.cssを修正
bodyを色を修正して、buttonとbuttonafterの定義を追加

@tailwind base;

@tailwind components;

@tailwind utilities;

:root {

--foreground-rgb: 0, 0, 0;

--background-start-rgb: 214, 219, 220;

--background-end-rgb: 255, 255, 255;

}

@media (prefers-color-scheme: white) {

:root {

--foreground-rgb: 255, 255, 255;

--background-start-rgb: 0, 0, 0;

--background-end-rgb: 0, 0, 0;

}

}

body {

color: rgb(var(--foreground-rgb));

background-color: white

/* background: linear-gradient(

to bottom,

transparent,

rgb(var(--background-end-rgb))

)

rgb(var(--background-start-rgb));

*/

}

@layer utilities {

.text-balance {

text-wrap: balance;

}

}

.button{

background-color: #000;

border-radius: 50px;

color: #fff;

padding: 15px 60px;

}

.buttonafter{

background-color: #000;

border-radius: 50px;

color: #0ff;

padding: 15px 60px;

}
アプリの動作確認をする
npx next dev
実行結果以下が表示される
ブラウザで、表示されたURLにアクセスする。以下が表示される
「ダイアログ表示」ボタンを押す。ダイアログが表示される
キャンセルを押すと、画面は遷移しない。
O Kを押すと、以下の画面に画面遷移する。