Files

5492 lines
189 KiB
Plaintext
Raw Permalink Normal View History

2026-10-14 10:01:46 +00:00
RUN v5.0.4 /home/hermes/worktrees/find-word-v0.2.3
❯ tests/App.test.tsx (18 tests | 10 failed) 2380ms
❯ 시작부터 결과까지 사용자 흐름 (13)
× 전체 음량을 시작 CTA 앞 설정 카드와 게임 환경 패널에 배치하고 값을 유지한다 216ms
× 다섯 난이도의 SNR과 음성·배경 크기 관계를 설명하고 결과에도 표시한다 402ms
× 한글 조합 도중 처음으로 돌아가도 새 세션의 입력은 정상 제출된다 148ms
× 혼합 모드 세 문제를 키보드·텍스트로 풀고 결과에서 다시 시작한다 342ms
× 음량 조절이 엔진에 전달되고 세션 종료 뒤 늦은 완료는 무시한다 104ms
× 시작 단계·SNR 선택, 재청취, 남은 문제와 다음 단계 라운드에 설정을 적용한다 37ms
× 오디오 started=false 중 종료는 즉시 정지하고 결과를 거쳐 홈으로 간다 87ms
× 오디오 started=true 중 종료는 즉시 정지하고 결과를 거쳐 홈으로 간다 88ms
× 답변 피드백에서 종료하면 답한 한 문항만 집계한다 121ms
× 5단계 완료는 6단계 대신 같은 단계의 새 세 문항을 시작한다 17ms
⎯⎯⎯⎯⎯⎯ Failed Tests 10 ⎯⎯⎯⎯⎯⎯⎯
FAIL tests/App.test.tsx > 시작부터 결과까지 사용자 흐름 > 전체 음량을 시작 CTA 앞 설정 카드와 게임 환경 패널에 배치하고 값을 유지한다
TestingLibraryElementError: Unable to find an accessible element with the role "button" and name "문제 풀이 종료"
Here are the accessible roles:
link:
Name "본문으로 건너뛰기":
<a
class="skip-link"
href="#main"
/>
--------------------------------------------------
banner:
Name "":
<header
class="header wrap"
/>
--------------------------------------------------
heading:
Name "단어를 맞춰라":
<h1 />
Name "길거리":
<h2 />
Name "정정해서 알려준 단어는 무엇인가요?":
<h2
tabindex="-1"
/>
--------------------------------------------------
button:
Name "처음으로":
<button
class="text-button"
/>
Name "시장":
<button />
Name "지장":
<button />
Name "사장":
<button />
Name "신장":
<button />
Name "↻ 다시 듣기":
<button
class="secondary"
/>
--------------------------------------------------
main:
Name "":
<main
class="wrap"
id="main"
tabindex="-1"
/>
--------------------------------------------------
region:
Name "단어 찾기 게임":
<section
aria-label="단어 찾기 게임"
class="game-layout"
/>
--------------------------------------------------
progressbar:
Name "전체 진행률":
<progress
aria-label="전체 진행률"
max="10"
value="0"
/>
--------------------------------------------------
complementary:
Name "":
<aside
class="environment-panel"
/>
--------------------------------------------------
paragraph:
Name "":
<p
class="eyebrow"
/>
Name "":
<p />
Name "":
<p
class="db-note"
/>
Name "":
<p
class="muted"
/>
Name "":
<p />
Name "":
<p />
--------------------------------------------------
slider:
Name "전체 음량":
<input
id="volume"
max="100"
min="0"
type="range"
value="60"
/>
--------------------------------------------------
status:
Name "":
<output
for="volume"
/>
--------------------------------------------------
group:
Name "답 선택":
<div
aria-label="답 선택"
class="answers"
role="group"
/>
--------------------------------------------------
contentinfo:
Name "":
<footer
class="footer wrap"
/>
--------------------------------------------------
Ignored nodes: comments, script, style
<body>
<div>
<a
class="skip-link"
href="#main"
>
본문으로 건너뛰기
</a>
<header
class="header wrap"
>
<div
class="brand"
>
<span
aria-hidden="true"
class="brand-mark"
>
<i />
<i />
<i />
<i />
</span>
<h1>
단어를 맞춰라
</h1>
<span
class="version"
>
v0.1.1
</span>
</div>
<div
class="header-actions"
>
<button
class="text-button"
>
처음으로
</button>
<span
class="little-dot"
/>
소리에 집중하는 시간
</div>
</header>
<main
class="wrap"
id="main"
tabindex="-1"
>
<section
aria-label="단어 찾기 게임"
class="game-layout"
>
<div
class="game-top"
>
<span
class="eyebrow"
>
나의 소리 탐험
</span>
<span>
문제 
<b>
01
</b>
 / 10
</span>
</div>
<progress
aria-label="전체 진행률"
max="10"
value="0"
/>
<div
class="game-columns"
>
<aside
class="environment-panel"
>
<p
class="eyebrow"
>
지금 듣고 있는 공간
</p>
<h2>
길거리
</h2>
<p>
지나가는 차와 도시의 웅성임
</p>
<div
aria-hidden="true"
class="mascot small"
>
<span
class="ear left"
/>
<span
class="ear right"
/>
<span
class="eye left"
/>
<span
class="eye right"
/>
<span
class="smile"
/>
<b>
S
</b>
</div>
<div
aria-hidden="true"
class="sound-wave "
>
<i
style="height: 10px; animation-delay: 0s;"
/>
<i
style="height: 33.799955450859244px; animation-delay: 0.05s;"
/>
<i
style="height: 16.132986448643948px; animation-delay: 0.1s;"
/>
<i
style="height: 32.219552375865575px; animation-delay: 0.15000000000000002s;"
/>
<i
style="height: 21.858720427326595px; animation-delay: 0.2s;"
/>
<i
style="height: 29.163690702963766px; animation-delay: 0.25s;"
/>
<i
style="height: 26.796992502245015px; animation-delay: 0.30000000000000004s;"
/>
<i
style="height: 24.835290693688798px; animation-delay: 0.35000000000000003s;"
/>
<i
style="height: 30.619883556555898px; animation-delay: 0.4s;"
/>
<i
style="height: 35.39139668035928px; animation-delay: 0.45s;"
/>
<i
style="height: 71.52943948029164px; animation-delay: 0.5s;"
/>
<i
style="height: 19.53593765210872px; animation-delay: 0.55s;"
/>
<i
style="height: 73.98674560913082px; animation-delay: 0.6000000000000001s;"
/>
<i
style="height: 16.952742107140878px; animation-delay: 0.65s;"
/>
<i
style="height: 72.19510052760725px; animation-delay: 0.7000000000000001s;"
/>
<i
style="height: 32.979734657418774px; animation-delay: 0.75s;"
/>
<i
style="height: 66.27347594564635px; animation-delay: 0.8s;"
/>
<i
style="height: 47.480789758355044px; animation-delay: 0.8500000000000001s;"
/>
<i
style="height: 56.615089141222136px; animation-delay: 0.9s;"
/>
<i
style="height: 59.492984932238116px; animation-delay: 0.9500000000000001s;"
/>
<i
style="height: 43.861291911681526px; animation-delay: 1s;"
/>
<i
style="height: 68.21866699734562px; animation-delay: 1.05s;"
/>
<i
style="height: 28.858982496016484px; animation-delay: 1.1s;"
/>
<i
style="height: 73.07841912260051px; animation-delay: 1.1500000000000001s;"
/>
<i
style="height: 12.60436847039135px; animation-delay: 1.2000000000000002s;"
/>
<i
style="height: 73.74953619965402px; animation-delay: 1.25s;"
/>
<i
style="height: 23.8231850360459px; animation-delay: 1.3s;"
/>
<i
style="height: 32.57029511072814px; animation-delay: 1.35s;"
/>
<i
style="height: 20.99981090780238px; animation-delay: 1.4000000000000001s;"
/>
<i
style="height: 29.735764963203792px; animation-delay: 1.4500000000000002s;"
/>
<i
style="height: 26.085500220240995px; animation-delay: 1.5s;"
/>
<i
style="height: 25.59070868046883px; animation-delay: 1.55s;"
/>
<i
style="height: 30.10305417152866px; animation-delay: 1.6s;"
/>
<i
style="height: 20.410372983416416px; animation-delay: 1.6500000000000001s;"
/>
<i
style="height: 32.785692656480826px; animation-delay: 1.7000000000000002s;"
/>
</div>
<div
class="level-tag"
>
1
단계 · 
SNR +6 dB
</div>
<p
class="db-note"
>
음성이 배경보다 6 dB 커요.
<br />
소리에 익숙해지기
</p>
<div
class="volume-row"
>
<label
for="volume"
>
<span
aria-hidden="true"
>
◖))
</span>
 전체 음량
</label>
<input
id="volume"
max="100"
min="0"
type="range"
value="60"
/>
<output
for="volume"
>
60
%
</output>
</div>
<div
class="mini-stats"
>
<span>
점수 
<b>
0
</b>
</span>
<span>
연속 정답 
<b>
0
</b>
</span>
</div>
</aside>
<div
class="question-panel panel"
>
<div
class="question-meta"
>
<span>
바로잡은 말
</span>
<span>
객관식
</span>
</div>
<h2
tabindex="-1"
>
정정해서 알려준 단어는 무엇인가요?
</h2>
<p
class="muted"
>
가장 또렷하게 기억나는 단어를 골라 주세요.
</p>
<div
aria-label="답 선택"
class="answers"
role="group"
>
<button>
<span
aria-hidden="true"
>
1
</span>
시장
</button>
<button>
<span
aria-hidden="true"
>
2
</span>
지장
</button>
<button>
<span
aria-hidden="true"
>
3
</span>
사장
</button>
<button>
<span
aria-hidden="true"
>
4
</span>
신장
</button>
</div>
<div
class="play-controls"
>
<button
class="secondary"
>
↻ 다시 듣기
</button>
<small>
다시 들어도 점수는 줄어들지 않아요.
</small>
</div>
</div>
</div>
</section>
</main>
<footer
class="footer wrap"
>
<p>
Designed by OZ at Heat-T Medical Inc.
</p>
<p>
청각적 주의·식별 게임 · 의료적 진단이나 치료를 제공하지 않습니다.
</p>
<span>
개인정보 수집 없이, 오직 플레이만.
</span>
</footer>
</div>
</body>
❯ Object.getElementError node_modules/@testing-library/dom/dist/config.js:37:19
❯ node_modules/@testing-library/dom/dist/query-helpers.js:76:38
❯ node_modules/@testing-library/dom/dist/query-helpers.js:52:17
❯ node_modules/@testing-library/dom/dist/query-helpers.js:95:19
❯ tests/App.test.tsx:99:31
97| expect(f.audio.setVolume).toHaveBeenLastCalledWith(0.6);
98| await f.finish();
99| await f.user.click(screen.getByRole("button", { name: "문제 풀이 종료" }…
| ^
100| await f.user.click(screen.getByRole("button", { name: "처음 화면으로" })…
101| expect(screen.getByRole("slider", { name: "전체 음량" })).toHaveValue(…
⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯[1/10]⎯
FAIL tests/App.test.tsx > 시작부터 결과까지 사용자 흐름 > 다섯 난이도의 SNR과 음성·배경 크기 관계를 설명하고 결과에도 표시한다
TestingLibraryElementError: Unable to find an accessible element with the role "button" and name `/결과 보기/`
Here are the accessible roles:
link:
Name "본문으로 건너뛰기":
<a
class="skip-link"
href="#main"
/>
--------------------------------------------------
banner:
Name "":
<header
class="header wrap"
/>
--------------------------------------------------
heading:
Name "단어를 맞춰라":
<h1 />
Name "극장":
<h2 />
Name "정답이에요!":
<h2
tabindex="-1"
/>
--------------------------------------------------
button:
Name "처음으로":
<button
class="text-button"
/>
Name "다음 문제":
<button
class="primary"
/>
--------------------------------------------------
main:
Name "":
<main
class="wrap"
id="main"
tabindex="-1"
/>
--------------------------------------------------
region:
Name "단어 찾기 게임":
<section
aria-label="단어 찾기 게임"
class="game-layout"
/>
--------------------------------------------------
progressbar:
Name "전체 진행률":
<progress
aria-label="전체 진행률"
max="10"
value="3"
/>
--------------------------------------------------
complementary:
Name "":
<aside
class="environment-panel"
/>
--------------------------------------------------
paragraph:
Name "":
<p
class="eyebrow"
/>
Name "":
<p />
Name "":
<p
class="db-note"
/>
Name "":
<p />
Name "":
<p
class="muted"
/>
Name "":
<p />
Name "":
<p />
--------------------------------------------------
slider:
Name "전체 음량":
<input
id="volume"
max="100"
min="0"
type="range"
value="35"
/>
--------------------------------------------------
status:
Name "":
<output
for="volume"
/>
--------------------------------------------------
strong:
Name "":
<strong />
--------------------------------------------------
blockquote:
Name "":
<blockquote />
--------------------------------------------------
contentinfo:
Name "":
<footer
class="footer wrap"
/>
--------------------------------------------------
Ignored nodes: comments, script, style
<body>
<div>
<a
class="skip-link"
href="#main"
>
본문으로 건너뛰기
</a>
<header
class="header wrap"
>
<div
class="brand"
>
<span
aria-hidden="true"
class="brand-mark"
>
<i />
<i />
<i />
<i />
</span>
<h1>
단어를 맞춰라
</h1>
<span
class="version"
>
v0.1.1
</span>
</div>
<div
class="header-actions"
>
<button
class="text-button"
>
처음으로
</button>
<span
class="little-dot"
/>
소리에 집중하는 시간
</div>
</header>
<main
class="wrap"
id="main"
tabindex="-1"
>
<section
aria-label="단어 찾기 게임"
class="game-layout"
>
<div
class="game-top"
>
<span
class="eyebrow"
>
나의 소리 탐험
</span>
<span>
문제 
<b>
03
</b>
 / 10
</span>
</div>
<progress
aria-label="전체 진행률"
max="10"
value="3"
/>
<div
class="game-columns"
>
<aside
class="environment-panel"
>
<p
class="eyebrow"
>
지금 듣고 있는 공간
</p>
<h2>
극장
</h2>
<p>
어두운 공간의 낮은 울림
</p>
<div
aria-hidden="true"
class="mascot small"
>
<span
class="ear left"
/>
<span
class="ear right"
/>
<span
class="eye left"
/>
<span
class="eye right"
/>
<span
class="smile"
/>
<b>
S
</b>
</div>
<div
aria-hidden="true"
class="sound-wave "
>
<i
style="height: 10px; animation-delay: 0s;"
/>
<i
style="height: 33.799955450859244px; animation-delay: 0.05s;"
/>
<i
style="height: 16.132986448643948px; animation-delay: 0.1s;"
/>
<i
style="height: 32.219552375865575px; animation-delay: 0.15000000000000002s;"
/>
<i
style="height: 21.858720427326595px; animation-delay: 0.2s;"
/>
<i
style="height: 29.163690702963766px; animation-delay: 0.25s;"
/>
<i
style="height: 26.796992502245015px; animation-delay: 0.30000000000000004s;"
/>
<i
style="height: 24.835290693688798px; animation-delay: 0.35000000000000003s;"
/>
<i
style="height: 30.619883556555898px; animation-delay: 0.4s;"
/>
<i
style="height: 35.39139668035928px; animation-delay: 0.45s;"
/>
<i
style="height: 71.52943948029164px; animation-delay: 0.5s;"
/>
<i
style="height: 19.53593765210872px; animation-delay: 0.55s;"
/>
<i
style="height: 73.98674560913082px; animation-delay: 0.6000000000000001s;"
/>
<i
style="height: 16.952742107140878px; animation-delay: 0.65s;"
/>
<i
style="height: 72.19510052760725px; animation-delay: 0.7000000000000001s;"
/>
<i
style="height: 32.979734657418774px; animation-delay: 0.75s;"
/>
<i
style="height: 66.27347594564635px; animation-delay: 0.8s;"
/>
<i
style="height: 47.480789758355044px; animation-delay: 0.8500000000000001s;"
/>
<i
style="height: 56.615089141222136px; animation-delay: 0.9s;"
/>
<i
style="height: 59.492984932238116px; animation-delay: 0.9500000000000001s;"
/>
<i
style="height: 43.861291911681526px; animation-delay: 1s;"
/>
<i
style="height: 68.21866699734562px; animation-delay: 1.05s;"
/>
<i
style="height: 28.858982496016484px; animation-delay: 1.1s;"
/>
<i
style="height: 73.07841912260051px; animation-delay: 1.1500000000000001s;"
/>
<i
style="height: 12.60436847039135px; animation-delay: 1.2000000000000002s;"
/>
<i
style="height: 73.74953619965402px; animation-delay: 1.25s;"
/>
<i
style="height: 23.8231850360459px; animation-delay: 1.3s;"
/>
<i
style="height: 32.57029511072814px; animation-delay: 1.35s;"
/>
<i
style="height: 20.99981090780238px; animation-delay: 1.4000000000000001s;"
/>
<i
style="height: 29.735764963203792px; animation-delay: 1.4500000000000002s;"
/>
<i
style="height: 26.085500220240995px; animation-delay: 1.5s;"
/>
<i
style="height: 25.59070868046883px; animation-delay: 1.55s;"
/>
<i
style="height: 30.10305417152866px; animation-delay: 1.6s;"
/>
<i
style="height: 20.410372983416416px; animation-delay: 1.6500000000000001s;"
/>
<i
style="height: 32.785692656480826px; animation-delay: 1.7000000000000002s;"
/>
</div>
<div
class="level-tag"
>
1
단계 · 
SNR +6 dB
</div>
<p
class="db-note"
>
음성이 배경보다 6 dB 커요.
<br />
소리에 익숙해지기
</p>
<div
class="volume-row"
>
<label
for="volume"
>
<span
aria-hidden="true"
>
◖))
</span>
 전체 음량
</label>
<input
id="volume"
max="100"
min="0"
type="range"
value="35"
/>
<output
for="volume"
>
35
%
</output>
</div>
<div
class="mini-stats"
>
<span>
점수 
<b>
330
</b>
</span>
<span>
연속 정답 
<b>
3
</b>
</span>
</div>
</aside>
<div
class="question-panel panel"
>
<div
class="question-meta"
>
<span>
신호의 조건
</span>
<span>
객관식
</span>
</div>
<div
class="feedback correct"
>
<span
aria-hidden="true"
class="feedback-icon"
>
✓
</span>
<h2
tabindex="-1"
>
정답이에요!
</h2>
<p>
숨겨진 단어는 
<strong>
소리
</strong>
</p>
<blockquote>
초록 불이면 앞 단어, 빨간 불이면 뒤 단어입니다. ‘오리’, ‘소리’. 지금은 빨간 불입니다.
</blockquote>
<p
class="muted"
>
내 답: 
소리
 · +
120
점
</p>
<button
class="primary"
>
다음 문제
 
<span
aria-hidden="true"
>
→
</span>
</button>
</div>
</div>
</div>
</section>
</main>
<footer
class="footer wrap"
>
<p>
Designed by OZ at Heat-T Medical Inc.
</p>
<p>
청각적 주의·식별 게임 · 의료적 진단이나 치료를 제공하지 않습니다.
</p>
<span>
개인정보 수집 없이, 오직 플레이만.
</span>
</footer>
</div>
</body>
❯ Object.getElementError node_modules/@testing-library/dom/dist/config.js:37:19
❯ node_modules/@testing-library/dom/dist/query-helpers.js:76:38
❯ node_modules/@testing-library/dom/dist/query-helpers.js:52:17
❯ node_modules/@testing-library/dom/dist/query-helpers.js:95:19
❯ tests/App.test.tsx:135:16
133| );
134| await f.user.click(
135| screen.getByRole("button", {
| ^
136| name: index === questions.length - 1 ? /결과 보기/ : /다음 문제/,
137| }),
⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯[2/10]⎯
FAIL tests/App.test.tsx > 시작부터 결과까지 사용자 흐름 > 한글 조합 도중 처음으로 돌아가도 새 세션의 입력은 정상 제출된다
TestingLibraryElementError: Unable to find an accessible element with the role "button" and name "문제 풀이 종료"
Here are the accessible roles:
link:
Name "본문으로 건너뛰기":
<a
class="skip-link"
href="#main"
/>
--------------------------------------------------
banner:
Name "":
<header
class="header wrap"
/>
--------------------------------------------------
heading:
Name "단어를 맞춰라":
<h1 />
Name "길거리":
<h2 />
Name "정정해서 알려준 단어는 무엇인가요?":
<h2
tabindex="-1"
/>
--------------------------------------------------
button:
Name "처음으로":
<button
class="text-button"
/>
Name "정답 확인":
<button
class="primary"
disabled=""
/>
Name "↻ 다시 듣기":
<button
class="secondary"
/>
--------------------------------------------------
main:
Name "":
<main
class="wrap"
id="main"
tabindex="-1"
/>
--------------------------------------------------
region:
Name "단어 찾기 게임":
<section
aria-label="단어 찾기 게임"
class="game-layout"
/>
--------------------------------------------------
progressbar:
Name "전체 진행률":
<progress
aria-label="전체 진행률"
max="10"
value="0"
/>
--------------------------------------------------
complementary:
Name "":
<aside
class="environment-panel"
/>
--------------------------------------------------
paragraph:
Name "":
<p
class="eyebrow"
/>
Name "":
<p />
Name "":
<p
class="db-note"
/>
Name "":
<p
class="muted"
/>
Name "":
<p />
Name "":
<p />
--------------------------------------------------
slider:
Name "전체 음량":
<input
id="volume"
max="100"
min="0"
type="range"
value="35"
/>
--------------------------------------------------
status:
Name "":
<output
for="volume"
/>
--------------------------------------------------
textbox:
Name "들은 단어":
<input
autocomplete="off"
id="answer"
maxlength="60"
placeholder="여기에 단어를 적어 주세요"
value=""
/>
--------------------------------------------------
contentinfo:
Name "":
<footer
class="footer wrap"
/>
--------------------------------------------------
Ignored nodes: comments, script, style
<body>
<div>
<a
class="skip-link"
href="#main"
>
본문으로 건너뛰기
</a>
<header
class="header wrap"
>
<div
class="brand"
>
<span
aria-hidden="true"
class="brand-mark"
>
<i />
<i />
<i />
<i />
</span>
<h1>
단어를 맞춰라
</h1>
<span
class="version"
>
v0.1.1
</span>
</div>
<div
class="header-actions"
>
<button
class="text-button"
>
처음으로
</button>
<span
class="little-dot"
/>
소리에 집중하는 시간
</div>
</header>
<main
class="wrap"
id="main"
tabindex="-1"
>
<section
aria-label="단어 찾기 게임"
class="game-layout"
>
<div
class="game-top"
>
<span
class="eyebrow"
>
나의 소리 탐험
</span>
<span>
문제 
<b>
01
</b>
 / 10
</span>
</div>
<progress
aria-label="전체 진행률"
max="10"
value="0"
/>
<div
class="game-columns"
>
<aside
class="environment-panel"
>
<p
class="eyebrow"
>
지금 듣고 있는 공간
</p>
<h2>
길거리
</h2>
<p>
지나가는 차와 도시의 웅성임
</p>
<div
aria-hidden="true"
class="mascot small"
>
<span
class="ear left"
/>
<span
class="ear right"
/>
<span
class="eye left"
/>
<span
class="eye right"
/>
<span
class="smile"
/>
<b>
S
</b>
</div>
<div
aria-hidden="true"
class="sound-wave "
>
<i
style="height: 10px; animation-delay: 0s;"
/>
<i
style="height: 33.799955450859244px; animation-delay: 0.05s;"
/>
<i
style="height: 16.132986448643948px; animation-delay: 0.1s;"
/>
<i
style="height: 32.219552375865575px; animation-delay: 0.15000000000000002s;"
/>
<i
style="height: 21.858720427326595px; animation-delay: 0.2s;"
/>
<i
style="height: 29.163690702963766px; animation-delay: 0.25s;"
/>
<i
style="height: 26.796992502245015px; animation-delay: 0.30000000000000004s;"
/>
<i
style="height: 24.835290693688798px; animation-delay: 0.35000000000000003s;"
/>
<i
style="height: 30.619883556555898px; animation-delay: 0.4s;"
/>
<i
style="height: 35.39139668035928px; animation-delay: 0.45s;"
/>
<i
style="height: 71.52943948029164px; animation-delay: 0.5s;"
/>
<i
style="height: 19.53593765210872px; animation-delay: 0.55s;"
/>
<i
style="height: 73.98674560913082px; animation-delay: 0.6000000000000001s;"
/>
<i
style="height: 16.952742107140878px; animation-delay: 0.65s;"
/>
<i
style="height: 72.19510052760725px; animation-delay: 0.7000000000000001s;"
/>
<i
style="height: 32.979734657418774px; animation-delay: 0.75s;"
/>
<i
style="height: 66.27347594564635px; animation-delay: 0.8s;"
/>
<i
style="height: 47.480789758355044px; animation-delay: 0.8500000000000001s;"
/>
<i
style="height: 56.615089141222136px; animation-delay: 0.9s;"
/>
<i
style="height: 59.492984932238116px; animation-delay: 0.9500000000000001s;"
/>
<i
style="height: 43.861291911681526px; animation-delay: 1s;"
/>
<i
style="height: 68.21866699734562px; animation-delay: 1.05s;"
/>
<i
style="height: 28.858982496016484px; animation-delay: 1.1s;"
/>
<i
style="height: 73.07841912260051px; animation-delay: 1.1500000000000001s;"
/>
<i
style="height: 12.60436847039135px; animation-delay: 1.2000000000000002s;"
/>
<i
style="height: 73.74953619965402px; animation-delay: 1.25s;"
/>
<i
style="height: 23.8231850360459px; animation-delay: 1.3s;"
/>
<i
style="height: 32.57029511072814px; animation-delay: 1.35s;"
/>
<i
style="height: 20.99981090780238px; animation-delay: 1.4000000000000001s;"
/>
<i
style="height: 29.735764963203792px; animation-delay: 1.4500000000000002s;"
/>
<i
style="height: 26.085500220240995px; animation-delay: 1.5s;"
/>
<i
style="height: 25.59070868046883px; animation-delay: 1.55s;"
/>
<i
style="height: 30.10305417152866px; animation-delay: 1.6s;"
/>
<i
style="height: 20.410372983416416px; animation-delay: 1.6500000000000001s;"
/>
<i
style="height: 32.785692656480826px; animation-delay: 1.7000000000000002s;"
/>
</div>
<div
class="level-tag"
>
1
단계 · 
SNR +6 dB
</div>
<p
class="db-note"
>
음성이 배경보다 6 dB 커요.
<br />
소리에 익숙해지기
</p>
<div
class="volume-row"
>
<label
for="volume"
>
<span
aria-hidden="true"
>
◖))
</span>
 전체 음량
</label>
<input
id="volume"
max="100"
min="0"
type="range"
value="35"
/>
<output
for="volume"
>
35
%
</output>
</div>
<div
class="mini-stats"
>
<span>
점수 
<b>
0
</b>
</span>
<span>
연속 정답 
<b>
0
</b>
</span>
</div>
</aside>
<div
class="question-panel panel"
>
<div
class="question-meta"
>
<span>
바로잡은 말
</span>
<span>
주관식
</span>
</div>
<h2
tabindex="-1"
>
정정해서 알려준 단어는 무엇인가요?
</h2>
<p
class="muted"
>
기억나는 단어 하나를 입력해 주세요.
</p>
<form>
<label
for="answer"
>
들은 단어
</label>
<input
autocomplete="off"
id="answer"
maxlength="60"
placeholder="여기에 단어를 적어 주세요"
value=""
/>
<button
class="primary"
disabled=""
>
정답 확인
</button>
</form>
<div
class="play-controls"
>
<button
class="secondary"
>
↻ 다시 듣기
</button>
<small>
다시 들어도 점수는 줄어들지 않아요.
</small>
</div>
</div>
</div>
</section>
</main>
<footer
class="footer wrap"
>
<p>
Designed by OZ at Heat-T Medical Inc.
</p>
<p>
청각적 주의·식별 게임 · 의료적 진단이나 치료를 제공하지 않습니다.
</p>
<span>
개인정보 수집 없이, 오직 플레이만.
</span>
</footer>
</div>
</body>
❯ Object.getElementError node_modules/@testing-library/dom/dist/config.js:37:19
❯ node_modules/@testing-library/dom/dist/query-helpers.js:76:38
❯ node_modules/@testing-library/dom/dist/query-helpers.js:52:17
❯ node_modules/@testing-library/dom/dist/query-helpers.js:95:19
❯ tests/App.test.tsx:160:31
158| screen.getByRole("textbox", { name: "들은 단어" }),
159| );
160| await f.user.click(screen.getByRole("button", { name: "문제 풀이 종료" }…
| ^
161| await f.user.click(screen.getByRole("button", { name: "처음 화면으로" })…
162| await f.user.click(
⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯[3/10]⎯
FAIL tests/App.test.tsx > 시작부터 결과까지 사용자 흐름 > 혼합 모드 세 문제를 키보드·텍스트로 풀고 결과에서 다시 시작한다
TestingLibraryElementError: Unable to find an accessible element with the role "button" and name `/결과 보기/`
Here are the accessible roles:
link:
Name "본문으로 건너뛰기":
<a
class="skip-link"
href="#main"
/>
--------------------------------------------------
banner:
Name "":
<header
class="header wrap"
/>
--------------------------------------------------
heading:
Name "단어를 맞춰라":
<h1 />
Name "극장":
<h2 />
Name "정답이에요!":
<h2
tabindex="-1"
/>
--------------------------------------------------
button:
Name "처음으로":
<button
class="text-button"
/>
Name "다음 문제":
<button
class="primary"
/>
--------------------------------------------------
main:
Name "":
<main
class="wrap"
id="main"
tabindex="-1"
/>
--------------------------------------------------
region:
Name "단어 찾기 게임":
<section
aria-label="단어 찾기 게임"
class="game-layout"
/>
--------------------------------------------------
progressbar:
Name "전체 진행률":
<progress
aria-label="전체 진행률"
max="10"
value="3"
/>
--------------------------------------------------
complementary:
Name "":
<aside
class="environment-panel"
/>
--------------------------------------------------
paragraph:
Name "":
<p
class="eyebrow"
/>
Name "":
<p />
Name "":
<p
class="db-note"
/>
Name "":
<p />
Name "":
<p
class="muted"
/>
Name "":
<p />
Name "":
<p />
--------------------------------------------------
slider:
Name "전체 음량":
<input
id="volume"
max="100"
min="0"
type="range"
value="35"
/>
--------------------------------------------------
status:
Name "":
<output
for="volume"
/>
--------------------------------------------------
strong:
Name "":
<strong />
--------------------------------------------------
blockquote:
Name "":
<blockquote />
--------------------------------------------------
contentinfo:
Name "":
<footer
class="footer wrap"
/>
--------------------------------------------------
Ignored nodes: comments, script, style
<body>
<div>
<a
class="skip-link"
href="#main"
>
본문으로 건너뛰기
</a>
<header
class="header wrap"
>
<div
class="brand"
>
<span
aria-hidden="true"
class="brand-mark"
>
<i />
<i />
<i />
<i />
</span>
<h1>
단어를 맞춰라
</h1>
<span
class="version"
>
v0.1.1
</span>
</div>
<div
class="header-actions"
>
<button
class="text-button"
>
처음으로
</button>
<span
class="little-dot"
/>
소리에 집중하는 시간
</div>
</header>
<main
class="wrap"
id="main"
tabindex="-1"
>
<section
aria-label="단어 찾기 게임"
class="game-layout"
>
<div
class="game-top"
>
<span
class="eyebrow"
>
나의 소리 탐험
</span>
<span>
문제 
<b>
03
</b>
 / 10
</span>
</div>
<progress
aria-label="전체 진행률"
max="10"
value="3"
/>
<div
class="game-columns"
>
<aside
class="environment-panel"
>
<p
class="eyebrow"
>
지금 듣고 있는 공간
</p>
<h2>
극장
</h2>
<p>
어두운 공간의 낮은 울림
</p>
<div
aria-hidden="true"
class="mascot small"
>
<span
class="ear left"
/>
<span
class="ear right"
/>
<span
class="eye left"
/>
<span
class="eye right"
/>
<span
class="smile"
/>
<b>
S
</b>
</div>
<div
aria-hidden="true"
class="sound-wave "
>
<i
style="height: 10px; animation-delay: 0s;"
/>
<i
style="height: 33.799955450859244px; animation-delay: 0.05s;"
/>
<i
style="height: 16.132986448643948px; animation-delay: 0.1s;"
/>
<i
style="height: 32.219552375865575px; animation-delay: 0.15000000000000002s;"
/>
<i
style="height: 21.858720427326595px; animation-delay: 0.2s;"
/>
<i
style="height: 29.163690702963766px; animation-delay: 0.25s;"
/>
<i
style="height: 26.796992502245015px; animation-delay: 0.30000000000000004s;"
/>
<i
style="height: 24.835290693688798px; animation-delay: 0.35000000000000003s;"
/>
<i
style="height: 30.619883556555898px; animation-delay: 0.4s;"
/>
<i
style="height: 35.39139668035928px; animation-delay: 0.45s;"
/>
<i
style="height: 71.52943948029164px; animation-delay: 0.5s;"
/>
<i
style="height: 19.53593765210872px; animation-delay: 0.55s;"
/>
<i
style="height: 73.98674560913082px; animation-delay: 0.6000000000000001s;"
/>
<i
style="height: 16.952742107140878px; animation-delay: 0.65s;"
/>
<i
style="height: 72.19510052760725px; animation-delay: 0.7000000000000001s;"
/>
<i
style="height: 32.979734657418774px; animation-delay: 0.75s;"
/>
<i
style="height: 66.27347594564635px; animation-delay: 0.8s;"
/>
<i
style="height: 47.480789758355044px; animation-delay: 0.8500000000000001s;"
/>
<i
style="height: 56.615089141222136px; animation-delay: 0.9s;"
/>
<i
style="height: 59.492984932238116px; animation-delay: 0.9500000000000001s;"
/>
<i
style="height: 43.861291911681526px; animation-delay: 1s;"
/>
<i
style="height: 68.21866699734562px; animation-delay: 1.05s;"
/>
<i
style="height: 28.858982496016484px; animation-delay: 1.1s;"
/>
<i
style="height: 73.07841912260051px; animation-delay: 1.1500000000000001s;"
/>
<i
style="height: 12.60436847039135px; animation-delay: 1.2000000000000002s;"
/>
<i
style="height: 73.74953619965402px; animation-delay: 1.25s;"
/>
<i
style="height: 23.8231850360459px; animation-delay: 1.3s;"
/>
<i
style="height: 32.57029511072814px; animation-delay: 1.35s;"
/>
<i
style="height: 20.99981090780238px; animation-delay: 1.4000000000000001s;"
/>
<i
style="height: 29.735764963203792px; animation-delay: 1.4500000000000002s;"
/>
<i
style="height: 26.085500220240995px; animation-delay: 1.5s;"
/>
<i
style="height: 25.59070868046883px; animation-delay: 1.55s;"
/>
<i
style="height: 30.10305417152866px; animation-delay: 1.6s;"
/>
<i
style="height: 20.410372983416416px; animation-delay: 1.6500000000000001s;"
/>
<i
style="height: 32.785692656480826px; animation-delay: 1.7000000000000002s;"
/>
</div>
<div
class="level-tag"
>
1
단계 · 
SNR +6 dB
</div>
<p
class="db-note"
>
음성이 배경보다 6 dB 커요.
<br />
소리에 익숙해지기
</p>
<div
class="volume-row"
>
<label
for="volume"
>
<span
aria-hidden="true"
>
◖))
</span>
 전체 음량
</label>
<input
id="volume"
max="100"
min="0"
type="range"
value="35"
/>
<output
for="volume"
>
35
%
</output>
</div>
<div
class="mini-stats"
>
<span>
점수 
<b>
330
</b>
</span>
<span>
연속 정답 
<b>
3
</b>
</span>
</div>
</aside>
<div
class="question-panel panel"
>
<div
class="question-meta"
>
<span>
신호의 조건
</span>
<span>
객관식
</span>
</div>
<div
class="feedback correct"
>
<span
aria-hidden="true"
class="feedback-icon"
>
✓
</span>
<h2
tabindex="-1"
>
정답이에요!
</h2>
<p>
숨겨진 단어는 
<strong>
소리
</strong>
</p>
<blockquote>
초록 불이면 앞 단어, 빨간 불이면 뒤 단어입니다. ‘오리’, ‘소리’. 지금은 빨간 불입니다.
</blockquote>
<p
class="muted"
>
내 답: 
소리
 · +
120
점
</p>
<button
class="primary"
>
다음 문제
 
<span
aria-hidden="true"
>
→
</span>
</button>
</div>
</div>
</div>
</section>
</main>
<footer
class="footer wrap"
>
<p>
Designed by OZ at Heat-T Medical Inc.
</p>
<p>
청각적 주의·식별 게임 · 의료적 진단이나 치료를 제공하지 않습니다.
</p>
<span>
개인정보 수집 없이, 오직 플레이만.
</span>
</footer>
</div>
</body>
❯ Object.getElementError node_modules/@testing-library/dom/dist/config.js:37:19
❯ node_modules/@testing-library/dom/dist/query-helpers.js:76:38
❯ node_modules/@testing-library/dom/dist/query-helpers.js:52:17
❯ node_modules/@testing-library/dom/dist/query-helpers.js:95:19
❯ tests/App.test.tsx:263:16
261| expect(screen.getByText(q.sentence)).toBeInTheDocument();
262| await f.user.click(
263| screen.getByRole("button", {
| ^
264| name: i === questions.length - 1 ? /결과 보기/ : /다음 문제/,
265| }),
⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯[4/10]⎯
FAIL tests/App.test.tsx > 시작부터 결과까지 사용자 흐름 > 음량 조절이 엔진에 전달되고 세션 종료 뒤 늦은 완료는 무시한다
TestingLibraryElementError: Unable to find an accessible element with the role "button" and name "문제 풀이 종료"
Here are the accessible roles:
link:
Name "본문으로 건너뛰기":
<a
class="skip-link"
href="#main"
/>
--------------------------------------------------
banner:
Name "":
<header
class="header wrap"
/>
--------------------------------------------------
heading:
Name "단어를 맞춰라":
<h1 />
Name "길거리":
<h2 />
Name "소리 사이에 집중해 보세요.":
<h2
tabindex="-1"
/>
--------------------------------------------------
button:
Name "처음으로":
<button
class="text-button"
/>
Name "듣는 중…":
<button
class="secondary"
disabled=""
/>
Name "듣기 중단":
<button
class="text-button"
/>
--------------------------------------------------
main:
Name "":
<main
class="wrap"
id="main"
tabindex="-1"
/>
--------------------------------------------------
region:
Name "단어 찾기 게임":
<section
aria-label="단어 찾기 게임"
class="game-layout"
/>
--------------------------------------------------
progressbar:
Name "전체 진행률":
<progress
aria-label="전체 진행률"
max="10"
value="0"
/>
--------------------------------------------------
complementary:
Name "":
<aside
class="environment-panel"
/>
--------------------------------------------------
paragraph:
Name "":
<p
class="eyebrow"
/>
Name "":
<p />
Name "":
<p
class="db-note"
/>
Name "":
<p />
Name "":
<p />
Name "":
<p />
--------------------------------------------------
slider:
Name "전체 음량":
<input
id="volume"
max="100"
min="0"
type="range"
value="20"
/>
--------------------------------------------------
status:
Name "":
<output
for="volume"
/>
Name "":
<p
role="status"
/>
--------------------------------------------------
contentinfo:
Name "":
<footer
class="footer wrap"
/>
--------------------------------------------------
Ignored nodes: comments, script, style
<body>
<div>
<a
class="skip-link"
href="#main"
>
본문으로 건너뛰기
</a>
<header
class="header wrap"
>
<div
class="brand"
>
<span
aria-hidden="true"
class="brand-mark"
>
<i />
<i />
<i />
<i />
</span>
<h1>
단어를 맞춰라
</h1>
<span
class="version"
>
v0.1.1
</span>
</div>
<div
class="header-actions"
>
<button
class="text-button"
>
처음으로
</button>
<span
class="little-dot"
/>
소리에 집중하는 시간
</div>
</header>
<main
class="wrap"
id="main"
tabindex="-1"
>
<section
aria-label="단어 찾기 게임"
class="game-layout"
>
<div
class="game-top"
>
<span
class="eyebrow"
>
나의 소리 탐험
</span>
<span>
문제 
<b>
01
</b>
 / 10
</span>
</div>
<progress
aria-label="전체 진행률"
max="10"
value="0"
/>
<div
class="game-columns"
>
<aside
class="environment-panel"
>
<p
class="eyebrow"
>
지금 듣고 있는 공간
</p>
<h2>
길거리
</h2>
<p>
지나가는 차와 도시의 웅성임
</p>
<div
aria-hidden="true"
class="mascot small"
>
<span
class="ear left"
/>
<span
class="ear right"
/>
<span
class="eye left"
/>
<span
class="eye right"
/>
<span
class="smile"
/>
<b>
S
</b>
</div>
<div
aria-hidden="true"
class="sound-wave active"
>
<i
style="height: 10px; animation-delay: 0s;"
/>
<i
style="height: 33.799955450859244px; animation-delay: 0.05s;"
/>
<i
style="height: 16.132986448643948px; animation-delay: 0.1s;"
/>
<i
style="height: 32.219552375865575px; animation-delay: 0.15000000000000002s;"
/>
<i
style="height: 21.858720427326595px; animation-delay: 0.2s;"
/>
<i
style="height: 29.163690702963766px; animation-delay: 0.25s;"
/>
<i
style="height: 26.796992502245015px; animation-delay: 0.30000000000000004s;"
/>
<i
style="height: 24.835290693688798px; animation-delay: 0.35000000000000003s;"
/>
<i
style="height: 30.619883556555898px; animation-delay: 0.4s;"
/>
<i
style="height: 35.39139668035928px; animation-delay: 0.45s;"
/>
<i
style="height: 71.52943948029164px; animation-delay: 0.5s;"
/>
<i
style="height: 19.53593765210872px; animation-delay: 0.55s;"
/>
<i
style="height: 73.98674560913082px; animation-delay: 0.6000000000000001s;"
/>
<i
style="height: 16.952742107140878px; animation-delay: 0.65s;"
/>
<i
style="height: 72.19510052760725px; animation-delay: 0.7000000000000001s;"
/>
<i
style="height: 32.979734657418774px; animation-delay: 0.75s;"
/>
<i
style="height: 66.27347594564635px; animation-delay: 0.8s;"
/>
<i
style="height: 47.480789758355044px; animation-delay: 0.8500000000000001s;"
/>
<i
style="height: 56.615089141222136px; animation-delay: 0.9s;"
/>
<i
style="height: 59.492984932238116px; animation-delay: 0.9500000000000001s;"
/>
<i
style="height: 43.861291911681526px; animation-delay: 1s;"
/>
<i
style="height: 68.21866699734562px; animation-delay: 1.05s;"
/>
<i
style="height: 28.858982496016484px; animation-delay: 1.1s;"
/>
<i
style="height: 73.07841912260051px; animation-delay: 1.1500000000000001s;"
/>
<i
style="height: 12.60436847039135px; animation-delay: 1.2000000000000002s;"
/>
<i
style="height: 73.74953619965402px; animation-delay: 1.25s;"
/>
<i
style="height: 23.8231850360459px; animation-delay: 1.3s;"
/>
<i
style="height: 32.57029511072814px; animation-delay: 1.35s;"
/>
<i
style="height: 20.99981090780238px; animation-delay: 1.4000000000000001s;"
/>
<i
style="height: 29.735764963203792px; animation-delay: 1.4500000000000002s;"
/>
<i
style="height: 26.085500220240995px; animation-delay: 1.5s;"
/>
<i
style="height: 25.59070868046883px; animation-delay: 1.55s;"
/>
<i
style="height: 30.10305417152866px; animation-delay: 1.6s;"
/>
<i
style="height: 20.410372983416416px; animation-delay: 1.6500000000000001s;"
/>
<i
style="height: 32.785692656480826px; animation-delay: 1.7000000000000002s;"
/>
</div>
<div
class="level-tag"
>
1
단계 · 
SNR +6 dB
</div>
<p
class="db-note"
>
음성이 배경보다 6 dB 커요.
<br />
소리에 익숙해지기
</p>
<div
class="volume-row"
>
<label
for="volume"
>
<span
aria-hidden="true"
>
◖))
</span>
 전체 음량
</label>
<input
id="volume"
max="100"
min="0"
type="range"
value="20"
/>
<output
for="volume"
>
20
%
</output>
</div>
<div
class="mini-stats"
>
<span>
점수 
<b>
0
</b>
</span>
<span>
연속 정답 
<b>
0
</b>
</span>
</div>
</aside>
<div
class="question-panel panel"
>
<div
class="question-meta"
>
<span>
바로잡은 말
</span>
<span>
객관식
</span>
</div>
<div
class="listening"
>
<span
aria-hidden="true"
class="listening-icon"
>
♬
</span>
<h2
tabindex="-1"
>
소리 사이에 집중해 보세요.
</h2>
<p>
문장이 끝나면 질문이 나타나요.
<br />
작은 단어 하나를 기억해 주세요.
</p>
<p
role="status"
>
에스의 목소리를 듣고 있어요…
</p>
</div>
<div
class="play-controls"
>
<button
class="secondary"
disabled=""
>
듣는 중…
</button>
<button
class="text-button"
>
듣기 중단
</button>
<small>
다시 들어도 점수는 줄어들지 않아요.
</small>
</div>
</div>
</div>
</section>
</main>
<footer
class="footer wrap"
>
<p>
Designed by OZ at Heat-T Medical Inc.
</p>
<p>
청각적 주의·식별 게임 · 의료적 진단이나 치료를 제공하지 않습니다.
</p>
<span>
개인정보 수집 없이, 오직 플레이만.
</span>
</footer>
</div>
</body>
❯ Object.getElementError node_modules/@testing-library/dom/dist/config.js:37:19
❯ node_modules/@testing-library/dom/dist/query-helpers.js:76:38
❯ node_modules/@testing-library/dom/dist/query-helpers.js:52:17
❯ node_modules/@testing-library/dom/dist/query-helpers.js:95:19
❯ tests/App.test.tsx:330:31
328| screen.getByRole("button", { name: "게임 시작 · 소리 듣기" }),
329| );
330| await f.user.click(screen.getByRole("button", { name: "문제 풀이 종료" }…
| ^
331| await f.user.click(screen.getByRole("button", { name: "처음 화면으로" })…
332| await f.finish();
⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯[5/10]⎯
FAIL tests/App.test.tsx > 시작 단계·SNR 선택, 재청취, 남은 문제와 다음 단계 라운드에 설정을 적용한다
TestingLibraryElementError: Unable to find a label with the text of: 시작 난이도
Ignored nodes: comments, script, style
<body>
<div>
<a
class="skip-link"
href="#main"
>
본문으로 건너뛰기
</a>
<header
class="header wrap"
>
<div
class="brand"
>
<span
aria-hidden="true"
class="brand-mark"
>
<i />
<i />
<i />
<i />
</span>
<h1>
단어를 맞춰라
</h1>
<span
class="version"
>
v0.1.1
</span>
</div>
<div
class="header-actions"
>
<a
href="#howto"
>
플레이 방법 
<span
aria-hidden="true"
>
↓
</span>
</a>
<span
class="little-dot"
/>
소리에 집중하는 시간
</div>
</header>
<main
class="wrap"
id="main"
tabindex="-1"
>
<section
aria-labelledby="hero-title"
class="hero"
>
<div
class="hero-copy"
>
<p
class="eyebrow"
>
<span />
 귀를 기울이면, 발견하는 즐거움
</p>
<h2
id="hero-title"
>
소음 속 작은 단어,
<br />
<em>
들리시나요?
</em>
</h2>
<p
class="lead"
>
도시의 소리 사이에 에스가 숨겨 둔 단어.
<br />
조금 더 귀 기울여, 오늘의 행운을 찾아보세요.
</p>
<div
class="hero-meta"
>
<span>
10개의 질문
</span>
<span>
5단계 도전
</span>
<span>
나만의 속도로
</span>
</div>
</div>
<div
class="sound-room"
>
<div
class="room-top"
>
<span>
<i />
 에스의 사운드 룸
</span>
<span>
8
가지 환경
</span>
</div>
<div
class="orbit orbit-one"
/>
<div
class="orbit orbit-two"
/>
<span
aria-hidden="true"
class="floating-note note-one"
>
♪
</span>
<span
aria-hidden="true"
class="floating-note note-two"
>
✳
</span>
<div
class="speech-bubble"
>
행운의 단어를 찾아보거라!
</div>
<div
aria-hidden="true"
class="mascot "
>
<span
class="ear left"
/>
<span
class="ear right"
/>
<span
class="eye left"
/>
<span
class="eye right"
/>
<span
class="smile"
/>
<b>
S
</b>
</div>
<div
class="room-bottom"
>
<div
aria-hidden="true"
class="sound-wave "
>
<i
style="height: 10px; animation-delay: 0s;"
/>
<i
style="height: 33.799955450859244px; animation-delay: 0.05s;"
/>
<i
style="height: 16.132986448643948px; animation-delay: 0.1s;"
/>
<i
style="height: 32.219552375865575px; animation-delay: 0.15000000000000002s;"
/>
<i
style="height: 21.858720427326595px; animation-delay: 0.2s;"
/>
<i
style="height: 29.163690702963766px; animation-delay: 0.25s;"
/>
<i
style="height: 26.796992502245015px; animation-delay: 0.30000000000000004s;"
/>
<i
style="height: 24.835290693688798px; animation-delay: 0.35000000000000003s;"
/>
<i
style="height: 30.619883556555898px; animation-delay: 0.4s;"
/>
<i
style="height: 35.39139668035928px; animation-delay: 0.45s;"
/>
<i
style="height: 71.52943948029164px; animation-delay: 0.5s;"
/>
<i
style="height: 19.53593765210872px; animation-delay: 0.55s;"
/>
<i
style="height: 73.98674560913082px; animation-delay: 0.6000000000000001s;"
/>
<i
style="height: 16.952742107140878px; animation-delay: 0.65s;"
/>
<i
style="height: 72.19510052760725px; animation-delay: 0.7000000000000001s;"
/>
<i
style="height: 32.979734657418774px; animation-delay: 0.75s;"
/>
<i
style="height: 66.27347594564635px; animation-delay: 0.8s;"
/>
<i
style="height: 47.480789758355044px; animation-delay: 0.8500000000000001s;"
/>
<i
style="height: 56.615089141222136px; animation-delay: 0.9s;"
/>
<i
style="height: 59.492984932238116px; animation-delay: 0.9500000000000001s;"
/>
<i
style="height: 43.861291911681526px; animation-delay: 1s;"
/>
<i
style="height: 68.21866699734562px; animation-delay: 1.05s;"
/>
<i
style="height: 28.858982496016484px; animation-delay: 1.1s;"
/>
<i
style="height: 73.07841912260051px; animation-delay: 1.1500000000000001s;"
/>
<i
style="height: 12.60436847039135px; animation-delay: 1.2000000000000002s;"
/>
<i
style="height: 73.74953619965402px; animation-delay: 1.25s;"
/>
<i
style="height: 23.8231850360459px; animation-delay: 1.3s;"
/>
<i
style="height: 32.57029511072814px; animation-delay: 1.35s;"
/>
<i
style="height: 20.99981090780238px; animation-delay: 1.4000000000000001s;"
/>
<i
style="height: 29.735764963203792px; animation-delay: 1.4500000000000002s;"
/>
<i
style="height: 26.085500220240995px; animation-delay: 1.5s;"
/>
<i
style="height: 25.59070868046883px; animation-delay: 1.55s;"
/>
<i
style="height: 30.10305417152866px; animation-delay: 1.6s;"
/>
<i
style="height: 20.410372983416416px; animation-delay: 1.6500000000000001s;"
/>
<i
style="height: 32.785692656480826px; animation-delay: 1.7000000000000002s;"
/>
</div>
<span>
소음 사이, 숨겨진 한마디
</span>
</div>
</div>
</section>
<section
aria-labelledby="setup-title"
class="setup-card"
>
<div
class="setup-heading"
>
<span
class="section-number"
>
01
</span>
<div>
<h2
id="setup-title"
>
나의 소리 탐험 준비
</h2>
<p>
편한 방식으로 시작하세요. 난이도는 조금씩 높아져요.
</p>
</div>
<span
class="round-badge"
>
약 3–5분
</span>
</div>
<div
class="setup-grid"
>
<fieldset
class="mode-field"
>
<legend>
어떻게 답할까요?
</legend>
<div
class="mode-options"
>
<label
class="mode-option "
>
<input
aria-label="골고루 풀기"
checked=""
name="mode"
type="radio"
value="mixed"
/>
<span
aria-hidden="true"
class="mode-icon"
>
◈
</span>
<strong>
골고루 풀기
</strong>
<small>
선택 + 직접 입력
</small>
</label>
<label
class="mode-option selected"
>
<input
aria-label="보기에서 선택"
name="mode"
type="radio"
value="choice"
/>
<span
aria-hidden="true"
class="mode-icon"
>
☷
</span>
<strong>
보기에서 선택
</strong>
<small>
4개 단어 중 하나
</small>
</label>
<label
class="mode-option "
>
<input
aria-label="직접 입력"
name="mode"
type="radio"
value="text"
/>
<span
aria-hidden="true"
class="mode-icon"
>
✎
</span>
<strong>
직접 입력
</strong>
<small>
기억한 단어 쓰기
</small>
</label>
</div>
</fieldset>
<div
class="environment-field"
>
<label
for="environment"
>
배경 환경
</label>
<select
id="environment"
>
<option
value="rotate"
>
여덟 가지 일상 속으로
</option>
<option
value="street"
>
길거리
</option>
<option
value="mall"
>
쇼핑몰
</option>
<option
value="theater"
>
극장
</option>
<option
value="department"
>
백화점
</option>
<option
value="market"
>
시장
</option>
<option
value="subway"
>
지하철
</option>
<option
value="cafe"
>
카페
</option>
<option
value="rain"
>
비 오는 거리
</option>
</select>
<p>
길거리부터 비 오는 거리까지, 매번 다른 공간을 만나요.
</p>
<div
class="environment-chips"
>
<span>
길거리
</span>
<span>
카페
</span>
<span>
지하철
</span>
<span>
+5개 환경
</span>
</div>
</div>
</div>
<div
class="volume-row"
>
<label
for="volume"
>
<span
aria-hidden="true"
>
◖))
</span>
 전체 음량
</label>
<input
id="volume"
max="100"
min="0"
type="range"
value="35"
/>
<output
for="volume"
>
35
%
</output>
</div>
<div
class="start-row"
>
<p>
<span
aria-hidden="true"
>
♬
</span>
 편안한 작은 음량으로 시작해 보세요.
</p>
<button
class="primary"
>
게임 시작 · 소리 듣기 
<span
aria-hidden="true"
>
→
</span>
</button>
</div>
</section>
<section
aria-labelledby="howto-title"
class="howto"
id="howto"
>
<h2
id="howto-title"
>
작은 단어를 발견하는 방법
</h2>
<div
class="steps"
>
<article>
<span>
01
</span>
<h3>
먼저, 귀 기울이기
</h3>
<p>
에스의 안내와 소음 속 문장을 들어요.
<br />
처음에는 또렷하게, 점점 더 작게.
</p>
</article>
<article>
<span>
02
</span>
<h3>
기억한 단어 찾기
</h3>
<p>
소리가 끝나면 질문이 나타나요.
<br />
보기에서 고르거나 직접 입력해요.
</p>
</article>
<article>
<span>
03
</span>
<h3>
나의 발견 돌아보기
</h3>
<p>
열 문제 뒤 나의 결과를 확인해요.
<br />
놓쳤다면 언제든 다시 들어도 좋아요.
</p>
</article>
</div>
</section>
</main>
<footer
class="footer wrap"
>
<p>
Designed by OZ at Heat-T Medical Inc.
</p>
<p>
청각적 주의·식별 게임 · 의료적 진단이나 치료를 제공하지 않습니다.
</p>
<span>
개인정보 수집 없이, 오직 플레이만.
</span>
</footer>
</div>
</body>
❯ Object.getElementError node_modules/@testing-library/dom/dist/config.js:37:19
❯ getAllByLabelText node_modules/@testing-library/dom/dist/queries/label-text.js:111:38
❯ node_modules/@testing-library/dom/dist/query-helpers.js:52:17
❯ node_modules/@testing-library/dom/dist/query-helpers.js:95:19
❯ tests/App.test.tsx:346:37
344| const f = fixture();
345| await f.user.click(screen.getByRole("radio", { name: "보기에서 선택" }));
346| await f.user.selectOptions(screen.getByLabelText("시작 난이도"), "4");
| ^
347| expect(screen.getByRole("slider", { name: "목표 음성 SNR" })).toHaveValu…
348| fireEvent.change(screen.getByRole("slider", { name: "목표 음성 SNR" }), …
⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯[6/10]⎯
FAIL tests/App.test.tsx > 오디오 started=false 중 종료는 즉시 정지하고 결과를 거쳐 홈으로 간다
TestingLibraryElementError: Unable to find an accessible element with the role "button" and name "문제 풀이 종료"
Here are the accessible roles:
link:
Name "본문으로 건너뛰기":
<a
class="skip-link"
href="#main"
/>
--------------------------------------------------
banner:
Name "":
<header
class="header wrap"
/>
--------------------------------------------------
heading:
Name "단어를 맞춰라":
<h1 />
Name "길거리":
<h2 />
Name "소리 사이에 집중해 보세요.":
<h2
tabindex="-1"
/>
--------------------------------------------------
button:
Name "처음으로":
<button
class="text-button"
/>
Name "듣는 중…":
<button
class="secondary"
disabled=""
/>
Name "듣기 중단":
<button
class="text-button"
/>
--------------------------------------------------
main:
Name "":
<main
class="wrap"
id="main"
tabindex="-1"
/>
--------------------------------------------------
region:
Name "단어 찾기 게임":
<section
aria-label="단어 찾기 게임"
class="game-layout"
/>
--------------------------------------------------
progressbar:
Name "전체 진행률":
<progress
aria-label="전체 진행률"
max="10"
value="0"
/>
--------------------------------------------------
complementary:
Name "":
<aside
class="environment-panel"
/>
--------------------------------------------------
paragraph:
Name "":
<p
class="eyebrow"
/>
Name "":
<p />
Name "":
<p
class="db-note"
/>
Name "":
<p />
Name "":
<p />
Name "":
<p />
--------------------------------------------------
slider:
Name "전체 음량":
<input
id="volume"
max="100"
min="0"
type="range"
value="35"
/>
--------------------------------------------------
status:
Name "":
<output
for="volume"
/>
Name "":
<p
role="status"
/>
--------------------------------------------------
contentinfo:
Name "":
<footer
class="footer wrap"
/>
--------------------------------------------------
Ignored nodes: comments, script, style
<body>
<div>
<a
class="skip-link"
href="#main"
>
본문으로 건너뛰기
</a>
<header
class="header wrap"
>
<div
class="brand"
>
<span
aria-hidden="true"
class="brand-mark"
>
<i />
<i />
<i />
<i />
</span>
<h1>
단어를 맞춰라
</h1>
<span
class="version"
>
v0.1.1
</span>
</div>
<div
class="header-actions"
>
<button
class="text-button"
>
처음으로
</button>
<span
class="little-dot"
/>
소리에 집중하는 시간
</div>
</header>
<main
class="wrap"
id="main"
tabindex="-1"
>
<section
aria-label="단어 찾기 게임"
class="game-layout"
>
<div
class="game-top"
>
<span
class="eyebrow"
>
나의 소리 탐험
</span>
<span>
문제 
<b>
01
</b>
 / 10
</span>
</div>
<progress
aria-label="전체 진행률"
max="10"
value="0"
/>
<div
class="game-columns"
>
<aside
class="environment-panel"
>
<p
class="eyebrow"
>
지금 듣고 있는 공간
</p>
<h2>
길거리
</h2>
<p>
지나가는 차와 도시의 웅성임
</p>
<div
aria-hidden="true"
class="mascot small"
>
<span
class="ear left"
/>
<span
class="ear right"
/>
<span
class="eye left"
/>
<span
class="eye right"
/>
<span
class="smile"
/>
<b>
S
</b>
</div>
<div
aria-hidden="true"
class="sound-wave active"
>
<i
style="height: 10px; animation-delay: 0s;"
/>
<i
style="height: 33.799955450859244px; animation-delay: 0.05s;"
/>
<i
style="height: 16.132986448643948px; animation-delay: 0.1s;"
/>
<i
style="height: 32.219552375865575px; animation-delay: 0.15000000000000002s;"
/>
<i
style="height: 21.858720427326595px; animation-delay: 0.2s;"
/>
<i
style="height: 29.163690702963766px; animation-delay: 0.25s;"
/>
<i
style="height: 26.796992502245015px; animation-delay: 0.30000000000000004s;"
/>
<i
style="height: 24.835290693688798px; animation-delay: 0.35000000000000003s;"
/>
<i
style="height: 30.619883556555898px; animation-delay: 0.4s;"
/>
<i
style="height: 35.39139668035928px; animation-delay: 0.45s;"
/>
<i
style="height: 71.52943948029164px; animation-delay: 0.5s;"
/>
<i
style="height: 19.53593765210872px; animation-delay: 0.55s;"
/>
<i
style="height: 73.98674560913082px; animation-delay: 0.6000000000000001s;"
/>
<i
style="height: 16.952742107140878px; animation-delay: 0.65s;"
/>
<i
style="height: 72.19510052760725px; animation-delay: 0.7000000000000001s;"
/>
<i
style="height: 32.979734657418774px; animation-delay: 0.75s;"
/>
<i
style="height: 66.27347594564635px; animation-delay: 0.8s;"
/>
<i
style="height: 47.480789758355044px; animation-delay: 0.8500000000000001s;"
/>
<i
style="height: 56.615089141222136px; animation-delay: 0.9s;"
/>
<i
style="height: 59.492984932238116px; animation-delay: 0.9500000000000001s;"
/>
<i
style="height: 43.861291911681526px; animation-delay: 1s;"
/>
<i
style="height: 68.21866699734562px; animation-delay: 1.05s;"
/>
<i
style="height: 28.858982496016484px; animation-delay: 1.1s;"
/>
<i
style="height: 73.07841912260051px; animation-delay: 1.1500000000000001s;"
/>
<i
style="height: 12.60436847039135px; animation-delay: 1.2000000000000002s;"
/>
<i
style="height: 73.74953619965402px; animation-delay: 1.25s;"
/>
<i
style="height: 23.8231850360459px; animation-delay: 1.3s;"
/>
<i
style="height: 32.57029511072814px; animation-delay: 1.35s;"
/>
<i
style="height: 20.99981090780238px; animation-delay: 1.4000000000000001s;"
/>
<i
style="height: 29.735764963203792px; animation-delay: 1.4500000000000002s;"
/>
<i
style="height: 26.085500220240995px; animation-delay: 1.5s;"
/>
<i
style="height: 25.59070868046883px; animation-delay: 1.55s;"
/>
<i
style="height: 30.10305417152866px; animation-delay: 1.6s;"
/>
<i
style="height: 20.410372983416416px; animation-delay: 1.6500000000000001s;"
/>
<i
style="height: 32.785692656480826px; animation-delay: 1.7000000000000002s;"
/>
</div>
<div
class="level-tag"
>
1
단계 · 
SNR +6 dB
</div>
<p
class="db-note"
>
음성이 배경보다 6 dB 커요.
<br />
소리에 익숙해지기
</p>
<div
class="volume-row"
>
<label
for="volume"
>
<span
aria-hidden="true"
>
◖))
</span>
 전체 음량
</label>
<input
id="volume"
max="100"
min="0"
type="range"
value="35"
/>
<output
for="volume"
>
35
%
</output>
</div>
<div
class="mini-stats"
>
<span>
점수 
<b>
0
</b>
</span>
<span>
연속 정답 
<b>
0
</b>
</span>
</div>
</aside>
<div
class="question-panel panel"
>
<div
class="question-meta"
>
<span>
바로잡은 말
</span>
<span>
객관식
</span>
</div>
<div
class="listening"
>
<span
aria-hidden="true"
class="listening-icon"
>
♬
</span>
<h2
tabindex="-1"
>
소리 사이에 집중해 보세요.
</h2>
<p>
문장이 끝나면 질문이 나타나요.
<br />
작은 단어 하나를 기억해 주세요.
</p>
<p
role="status"
>
소리를 준비하고 있어요…
</p>
</div>
<div
class="play-controls"
>
<button
class="secondary"
disabled=""
>
듣는 중…
</button>
<button
class="text-button"
>
듣기 중단
</button>
<small>
다시 들어도 점수는 줄어들지 않아요.
</small>
</div>
</div>
</div>
</section>
</main>
<footer
class="footer wrap"
>
<p>
Designed by OZ at Heat-T Medical Inc.
</p>
<p>
청각적 주의·식별 게임 · 의료적 진단이나 치료를 제공하지 않습니다.
</p>
<span>
개인정보 수집 없이, 오직 플레이만.
</span>
</footer>
</div>
</body>
❯ Object.getElementError node_modules/@testing-library/dom/dist/config.js:37:19
❯ node_modules/@testing-library/dom/dist/query-helpers.js:76:38
❯ node_modules/@testing-library/dom/dist/query-helpers.js:52:17
❯ node_modules/@testing-library/dom/dist/query-helpers.js:95:19
❯ tests/App.test.tsx:377:29
375| const f = fixture(started);
376| await f.user.click(screen.getByRole("button", { name: "게임 시작 · 소리 듣기…
377| await f.user.click(screen.getByRole("button", { name: "문제 풀이 종료" }));
| ^
378| expect(f.audio.stop).toHaveBeenCalledOnce();
379| expect(screen.getByRole("heading", { name: "문제 풀이를 종료했어요." })).toHav…
⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯[7/10]⎯
FAIL tests/App.test.tsx > 오디오 started=true 중 종료는 즉시 정지하고 결과를 거쳐 홈으로 간다
TestingLibraryElementError: Unable to find an accessible element with the role "button" and name "문제 풀이 종료"
Here are the accessible roles:
link:
Name "본문으로 건너뛰기":
<a
class="skip-link"
href="#main"
/>
--------------------------------------------------
banner:
Name "":
<header
class="header wrap"
/>
--------------------------------------------------
heading:
Name "단어를 맞춰라":
<h1 />
Name "길거리":
<h2 />
Name "소리 사이에 집중해 보세요.":
<h2
tabindex="-1"
/>
--------------------------------------------------
button:
Name "처음으로":
<button
class="text-button"
/>
Name "듣는 중…":
<button
class="secondary"
disabled=""
/>
Name "듣기 중단":
<button
class="text-button"
/>
--------------------------------------------------
main:
Name "":
<main
class="wrap"
id="main"
tabindex="-1"
/>
--------------------------------------------------
region:
Name "단어 찾기 게임":
<section
aria-label="단어 찾기 게임"
class="game-layout"
/>
--------------------------------------------------
progressbar:
Name "전체 진행률":
<progress
aria-label="전체 진행률"
max="10"
value="0"
/>
--------------------------------------------------
complementary:
Name "":
<aside
class="environment-panel"
/>
--------------------------------------------------
paragraph:
Name "":
<p
class="eyebrow"
/>
Name "":
<p />
Name "":
<p
class="db-note"
/>
Name "":
<p />
Name "":
<p />
Name "":
<p />
--------------------------------------------------
slider:
Name "전체 음량":
<input
id="volume"
max="100"
min="0"
type="range"
value="35"
/>
--------------------------------------------------
status:
Name "":
<output
for="volume"
/>
Name "":
<p
role="status"
/>
--------------------------------------------------
contentinfo:
Name "":
<footer
class="footer wrap"
/>
--------------------------------------------------
Ignored nodes: comments, script, style
<body>
<div>
<a
class="skip-link"
href="#main"
>
본문으로 건너뛰기
</a>
<header
class="header wrap"
>
<div
class="brand"
>
<span
aria-hidden="true"
class="brand-mark"
>
<i />
<i />
<i />
<i />
</span>
<h1>
단어를 맞춰라
</h1>
<span
class="version"
>
v0.1.1
</span>
</div>
<div
class="header-actions"
>
<button
class="text-button"
>
처음으로
</button>
<span
class="little-dot"
/>
소리에 집중하는 시간
</div>
</header>
<main
class="wrap"
id="main"
tabindex="-1"
>
<section
aria-label="단어 찾기 게임"
class="game-layout"
>
<div
class="game-top"
>
<span
class="eyebrow"
>
나의 소리 탐험
</span>
<span>
문제 
<b>
01
</b>
 / 10
</span>
</div>
<progress
aria-label="전체 진행률"
max="10"
value="0"
/>
<div
class="game-columns"
>
<aside
class="environment-panel"
>
<p
class="eyebrow"
>
지금 듣고 있는 공간
</p>
<h2>
길거리
</h2>
<p>
지나가는 차와 도시의 웅성임
</p>
<div
aria-hidden="true"
class="mascot small"
>
<span
class="ear left"
/>
<span
class="ear right"
/>
<span
class="eye left"
/>
<span
class="eye right"
/>
<span
class="smile"
/>
<b>
S
</b>
</div>
<div
aria-hidden="true"
class="sound-wave active"
>
<i
style="height: 10px; animation-delay: 0s;"
/>
<i
style="height: 33.799955450859244px; animation-delay: 0.05s;"
/>
<i
style="height: 16.132986448643948px; animation-delay: 0.1s;"
/>
<i
style="height: 32.219552375865575px; animation-delay: 0.15000000000000002s;"
/>
<i
style="height: 21.858720427326595px; animation-delay: 0.2s;"
/>
<i
style="height: 29.163690702963766px; animation-delay: 0.25s;"
/>
<i
style="height: 26.796992502245015px; animation-delay: 0.30000000000000004s;"
/>
<i
style="height: 24.835290693688798px; animation-delay: 0.35000000000000003s;"
/>
<i
style="height: 30.619883556555898px; animation-delay: 0.4s;"
/>
<i
style="height: 35.39139668035928px; animation-delay: 0.45s;"
/>
<i
style="height: 71.52943948029164px; animation-delay: 0.5s;"
/>
<i
style="height: 19.53593765210872px; animation-delay: 0.55s;"
/>
<i
style="height: 73.98674560913082px; animation-delay: 0.6000000000000001s;"
/>
<i
style="height: 16.952742107140878px; animation-delay: 0.65s;"
/>
<i
style="height: 72.19510052760725px; animation-delay: 0.7000000000000001s;"
/>
<i
style="height: 32.979734657418774px; animation-delay: 0.75s;"
/>
<i
style="height: 66.27347594564635px; animation-delay: 0.8s;"
/>
<i
style="height: 47.480789758355044px; animation-delay: 0.8500000000000001s;"
/>
<i
style="height: 56.615089141222136px; animation-delay: 0.9s;"
/>
<i
style="height: 59.492984932238116px; animation-delay: 0.9500000000000001s;"
/>
<i
style="height: 43.861291911681526px; animation-delay: 1s;"
/>
<i
style="height: 68.21866699734562px; animation-delay: 1.05s;"
/>
<i
style="height: 28.858982496016484px; animation-delay: 1.1s;"
/>
<i
style="height: 73.07841912260051px; animation-delay: 1.1500000000000001s;"
/>
<i
style="height: 12.60436847039135px; animation-delay: 1.2000000000000002s;"
/>
<i
style="height: 73.74953619965402px; animation-delay: 1.25s;"
/>
<i
style="height: 23.8231850360459px; animation-delay: 1.3s;"
/>
<i
style="height: 32.57029511072814px; animation-delay: 1.35s;"
/>
<i
style="height: 20.99981090780238px; animation-delay: 1.4000000000000001s;"
/>
<i
style="height: 29.735764963203792px; animation-delay: 1.4500000000000002s;"
/>
<i
style="height: 26.085500220240995px; animation-delay: 1.5s;"
/>
<i
style="height: 25.59070868046883px; animation-delay: 1.55s;"
/>
<i
style="height: 30.10305417152866px; animation-delay: 1.6s;"
/>
<i
style="height: 20.410372983416416px; animation-delay: 1.6500000000000001s;"
/>
<i
style="height: 32.785692656480826px; animation-delay: 1.7000000000000002s;"
/>
</div>
<div
class="level-tag"
>
1
단계 · 
SNR +6 dB
</div>
<p
class="db-note"
>
음성이 배경보다 6 dB 커요.
<br />
소리에 익숙해지기
</p>
<div
class="volume-row"
>
<label
for="volume"
>
<span
aria-hidden="true"
>
◖))
</span>
 전체 음량
</label>
<input
id="volume"
max="100"
min="0"
type="range"
value="35"
/>
<output
for="volume"
>
35
%
</output>
</div>
<div
class="mini-stats"
>
<span>
점수 
<b>
0
</b>
</span>
<span>
연속 정답 
<b>
0
</b>
</span>
</div>
</aside>
<div
class="question-panel panel"
>
<div
class="question-meta"
>
<span>
바로잡은 말
</span>
<span>
객관식
</span>
</div>
<div
class="listening"
>
<span
aria-hidden="true"
class="listening-icon"
>
♬
</span>
<h2
tabindex="-1"
>
소리 사이에 집중해 보세요.
</h2>
<p>
문장이 끝나면 질문이 나타나요.
<br />
작은 단어 하나를 기억해 주세요.
</p>
<p
role="status"
>
에스의 목소리를 듣고 있어요…
</p>
</div>
<div
class="play-controls"
>
<button
class="secondary"
disabled=""
>
듣는 중…
</button>
<button
class="text-button"
>
듣기 중단
</button>
<small>
다시 들어도 점수는 줄어들지 않아요.
</small>
</div>
</div>
</div>
</section>
</main>
<footer
class="footer wrap"
>
<p>
Designed by OZ at Heat-T Medical Inc.
</p>
<p>
청각적 주의·식별 게임 · 의료적 진단이나 치료를 제공하지 않습니다.
</p>
<span>
개인정보 수집 없이, 오직 플레이만.
</span>
</footer>
</div>
</body>
❯ Object.getElementError node_modules/@testing-library/dom/dist/config.js:37:19
❯ node_modules/@testing-library/dom/dist/query-helpers.js:76:38
❯ node_modules/@testing-library/dom/dist/query-helpers.js:52:17
❯ node_modules/@testing-library/dom/dist/query-helpers.js:95:19
❯ tests/App.test.tsx:377:29
375| const f = fixture(started);
376| await f.user.click(screen.getByRole("button", { name: "게임 시작 · 소리 듣기…
377| await f.user.click(screen.getByRole("button", { name: "문제 풀이 종료" }));
| ^
378| expect(f.audio.stop).toHaveBeenCalledOnce();
379| expect(screen.getByRole("heading", { name: "문제 풀이를 종료했어요." })).toHav…
⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯[8/10]⎯
FAIL tests/App.test.tsx > 답변 피드백에서 종료하면 답한 한 문항만 집계한다
TestingLibraryElementError: Unable to find an accessible element with the role "button" and name "문제 풀이 종료"
Here are the accessible roles:
link:
Name "본문으로 건너뛰기":
<a
class="skip-link"
href="#main"
/>
--------------------------------------------------
banner:
Name "":
<header
class="header wrap"
/>
--------------------------------------------------
heading:
Name "단어를 맞춰라":
<h1 />
Name "길거리":
<h2 />
Name "정답이에요!":
<h2
tabindex="-1"
/>
--------------------------------------------------
button:
Name "처음으로":
<button
class="text-button"
/>
Name "다음 문제":
<button
class="primary"
/>
--------------------------------------------------
main:
Name "":
<main
class="wrap"
id="main"
tabindex="-1"
/>
--------------------------------------------------
region:
Name "단어 찾기 게임":
<section
aria-label="단어 찾기 게임"
class="game-layout"
/>
--------------------------------------------------
progressbar:
Name "전체 진행률":
<progress
aria-label="전체 진행률"
max="10"
value="1"
/>
--------------------------------------------------
complementary:
Name "":
<aside
class="environment-panel"
/>
--------------------------------------------------
paragraph:
Name "":
<p
class="eyebrow"
/>
Name "":
<p />
Name "":
<p
class="db-note"
/>
Name "":
<p />
Name "":
<p
class="muted"
/>
Name "":
<p />
Name "":
<p />
--------------------------------------------------
slider:
Name "전체 음량":
<input
id="volume"
max="100"
min="0"
type="range"
value="35"
/>
--------------------------------------------------
status:
Name "":
<output
for="volume"
/>
--------------------------------------------------
strong:
Name "":
<strong />
--------------------------------------------------
blockquote:
Name "":
<blockquote />
--------------------------------------------------
contentinfo:
Name "":
<footer
class="footer wrap"
/>
--------------------------------------------------
Ignored nodes: comments, script, style
<body>
<div>
<a
class="skip-link"
href="#main"
>
본문으로 건너뛰기
</a>
<header
class="header wrap"
>
<div
class="brand"
>
<span
aria-hidden="true"
class="brand-mark"
>
<i />
<i />
<i />
<i />
</span>
<h1>
단어를 맞춰라
</h1>
<span
class="version"
>
v0.1.1
</span>
</div>
<div
class="header-actions"
>
<button
class="text-button"
>
처음으로
</button>
<span
class="little-dot"
/>
소리에 집중하는 시간
</div>
</header>
<main
class="wrap"
id="main"
tabindex="-1"
>
<section
aria-label="단어 찾기 게임"
class="game-layout"
>
<div
class="game-top"
>
<span
class="eyebrow"
>
나의 소리 탐험
</span>
<span>
문제 
<b>
01
</b>
 / 10
</span>
</div>
<progress
aria-label="전체 진행률"
max="10"
value="1"
/>
<div
class="game-columns"
>
<aside
class="environment-panel"
>
<p
class="eyebrow"
>
지금 듣고 있는 공간
</p>
<h2>
길거리
</h2>
<p>
지나가는 차와 도시의 웅성임
</p>
<div
aria-hidden="true"
class="mascot small"
>
<span
class="ear left"
/>
<span
class="ear right"
/>
<span
class="eye left"
/>
<span
class="eye right"
/>
<span
class="smile"
/>
<b>
S
</b>
</div>
<div
aria-hidden="true"
class="sound-wave "
>
<i
style="height: 10px; animation-delay: 0s;"
/>
<i
style="height: 33.799955450859244px; animation-delay: 0.05s;"
/>
<i
style="height: 16.132986448643948px; animation-delay: 0.1s;"
/>
<i
style="height: 32.219552375865575px; animation-delay: 0.15000000000000002s;"
/>
<i
style="height: 21.858720427326595px; animation-delay: 0.2s;"
/>
<i
style="height: 29.163690702963766px; animation-delay: 0.25s;"
/>
<i
style="height: 26.796992502245015px; animation-delay: 0.30000000000000004s;"
/>
<i
style="height: 24.835290693688798px; animation-delay: 0.35000000000000003s;"
/>
<i
style="height: 30.619883556555898px; animation-delay: 0.4s;"
/>
<i
style="height: 35.39139668035928px; animation-delay: 0.45s;"
/>
<i
style="height: 71.52943948029164px; animation-delay: 0.5s;"
/>
<i
style="height: 19.53593765210872px; animation-delay: 0.55s;"
/>
<i
style="height: 73.98674560913082px; animation-delay: 0.6000000000000001s;"
/>
<i
style="height: 16.952742107140878px; animation-delay: 0.65s;"
/>
<i
style="height: 72.19510052760725px; animation-delay: 0.7000000000000001s;"
/>
<i
style="height: 32.979734657418774px; animation-delay: 0.75s;"
/>
<i
style="height: 66.27347594564635px; animation-delay: 0.8s;"
/>
<i
style="height: 47.480789758355044px; animation-delay: 0.8500000000000001s;"
/>
<i
style="height: 56.615089141222136px; animation-delay: 0.9s;"
/>
<i
style="height: 59.492984932238116px; animation-delay: 0.9500000000000001s;"
/>
<i
style="height: 43.861291911681526px; animation-delay: 1s;"
/>
<i
style="height: 68.21866699734562px; animation-delay: 1.05s;"
/>
<i
style="height: 28.858982496016484px; animation-delay: 1.1s;"
/>
<i
style="height: 73.07841912260051px; animation-delay: 1.1500000000000001s;"
/>
<i
style="height: 12.60436847039135px; animation-delay: 1.2000000000000002s;"
/>
<i
style="height: 73.74953619965402px; animation-delay: 1.25s;"
/>
<i
style="height: 23.8231850360459px; animation-delay: 1.3s;"
/>
<i
style="height: 32.57029511072814px; animation-delay: 1.35s;"
/>
<i
style="height: 20.99981090780238px; animation-delay: 1.4000000000000001s;"
/>
<i
style="height: 29.735764963203792px; animation-delay: 1.4500000000000002s;"
/>
<i
style="height: 26.085500220240995px; animation-delay: 1.5s;"
/>
<i
style="height: 25.59070868046883px; animation-delay: 1.55s;"
/>
<i
style="height: 30.10305417152866px; animation-delay: 1.6s;"
/>
<i
style="height: 20.410372983416416px; animation-delay: 1.6500000000000001s;"
/>
<i
style="height: 32.785692656480826px; animation-delay: 1.7000000000000002s;"
/>
</div>
<div
class="level-tag"
>
1
단계 · 
SNR +6 dB
</div>
<p
class="db-note"
>
음성이 배경보다 6 dB 커요.
<br />
소리에 익숙해지기
</p>
<div
class="volume-row"
>
<label
for="volume"
>
<span
aria-hidden="true"
>
◖))
</span>
 전체 음량
</label>
<input
id="volume"
max="100"
min="0"
type="range"
value="35"
/>
<output
for="volume"
>
35
%
</output>
</div>
<div
class="mini-stats"
>
<span>
점수 
<b>
100
</b>
</span>
<span>
연속 정답 
<b>
1
</b>
</span>
</div>
</aside>
<div
class="question-panel panel"
>
<div
class="question-meta"
>
<span>
바로잡은 말
</span>
<span>
객관식
</span>
</div>
<div
class="feedback correct"
>
<span
aria-hidden="true"
class="feedback-icon"
>
✓
</span>
<h2
tabindex="-1"
>
정답이에요!
</h2>
<p>
숨겨진 단어는 
<strong>
시장
</strong>
</p>
<blockquote>
정답은 ‘지장’입니다. 아니, 잘못 말했어요. 정정한 답은 ‘시장’입니다.
</blockquote>
<p
class="muted"
>
내 답: 
시장
 · +
100
점
</p>
<button
class="primary"
>
다음 문제
 
<span
aria-hidden="true"
>
→
</span>
</button>
</div>
</div>
</div>
</section>
</main>
<footer
class="footer wrap"
>
<p>
Designed by OZ at Heat-T Medical Inc.
</p>
<p>
청각적 주의·식별 게임 · 의료적 진단이나 치료를 제공하지 않습니다.
</p>
<span>
개인정보 수집 없이, 오직 플레이만.
</span>
</footer>
</div>
</body>
❯ Object.getElementError node_modules/@testing-library/dom/dist/config.js:37:19
❯ node_modules/@testing-library/dom/dist/query-helpers.js:76:38
❯ node_modules/@testing-library/dom/dist/query-helpers.js:52:17
❯ node_modules/@testing-library/dom/dist/query-helpers.js:95:19
❯ tests/App.test.tsx:393:29
391| await f.finish();
392| await f.user.click(screen.getByRole("button", { name: new RegExp(cre…
393| await f.user.click(screen.getByRole("button", { name: "문제 풀이 종료" }));
| ^
394| expect(screen.getByText("응답 1문항 · 정답 1문항")).toBeInTheDocument();
395| expect(screen.getByText("정답률 · 1/1")).toBeInTheDocument();
⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯[9/10]⎯
FAIL tests/App.test.tsx > 5단계 완료는 6단계 대신 같은 단계의 새 세 문항을 시작한다
TestingLibraryElementError: Unable to find a label with the text of: 시작 난이도
Ignored nodes: comments, script, style
<body>
<div>
<a
class="skip-link"
href="#main"
>
본문으로 건너뛰기
</a>
<header
class="header wrap"
>
<div
class="brand"
>
<span
aria-hidden="true"
class="brand-mark"
>
<i />
<i />
<i />
<i />
</span>
<h1>
단어를 맞춰라
</h1>
<span
class="version"
>
v0.1.1
</span>
</div>
<div
class="header-actions"
>
<a
href="#howto"
>
플레이 방법 
<span
aria-hidden="true"
>
↓
</span>
</a>
<span
class="little-dot"
/>
소리에 집중하는 시간
</div>
</header>
<main
class="wrap"
id="main"
tabindex="-1"
>
<section
aria-labelledby="hero-title"
class="hero"
>
<div
class="hero-copy"
>
<p
class="eyebrow"
>
<span />
 귀를 기울이면, 발견하는 즐거움
</p>
<h2
id="hero-title"
>
소음 속 작은 단어,
<br />
<em>
들리시나요?
</em>
</h2>
<p
class="lead"
>
도시의 소리 사이에 에스가 숨겨 둔 단어.
<br />
조금 더 귀 기울여, 오늘의 행운을 찾아보세요.
</p>
<div
class="hero-meta"
>
<span>
10개의 질문
</span>
<span>
5단계 도전
</span>
<span>
나만의 속도로
</span>
</div>
</div>
<div
class="sound-room"
>
<div
class="room-top"
>
<span>
<i />
 에스의 사운드 룸
</span>
<span>
8
가지 환경
</span>
</div>
<div
class="orbit orbit-one"
/>
<div
class="orbit orbit-two"
/>
<span
aria-hidden="true"
class="floating-note note-one"
>
♪
</span>
<span
aria-hidden="true"
class="floating-note note-two"
>
✳
</span>
<div
class="speech-bubble"
>
행운의 단어를 찾아보거라!
</div>
<div
aria-hidden="true"
class="mascot "
>
<span
class="ear left"
/>
<span
class="ear right"
/>
<span
class="eye left"
/>
<span
class="eye right"
/>
<span
class="smile"
/>
<b>
S
</b>
</div>
<div
class="room-bottom"
>
<div
aria-hidden="true"
class="sound-wave "
>
<i
style="height: 10px; animation-delay: 0s;"
/>
<i
style="height: 33.799955450859244px; animation-delay: 0.05s;"
/>
<i
style="height: 16.132986448643948px; animation-delay: 0.1s;"
/>
<i
style="height: 32.219552375865575px; animation-delay: 0.15000000000000002s;"
/>
<i
style="height: 21.858720427326595px; animation-delay: 0.2s;"
/>
<i
style="height: 29.163690702963766px; animation-delay: 0.25s;"
/>
<i
style="height: 26.796992502245015px; animation-delay: 0.30000000000000004s;"
/>
<i
style="height: 24.835290693688798px; animation-delay: 0.35000000000000003s;"
/>
<i
style="height: 30.619883556555898px; animation-delay: 0.4s;"
/>
<i
style="height: 35.39139668035928px; animation-delay: 0.45s;"
/>
<i
style="height: 71.52943948029164px; animation-delay: 0.5s;"
/>
<i
style="height: 19.53593765210872px; animation-delay: 0.55s;"
/>
<i
style="height: 73.98674560913082px; animation-delay: 0.6000000000000001s;"
/>
<i
style="height: 16.952742107140878px; animation-delay: 0.65s;"
/>
<i
style="height: 72.19510052760725px; animation-delay: 0.7000000000000001s;"
/>
<i
style="height: 32.979734657418774px; animation-delay: 0.75s;"
/>
<i
style="height: 66.27347594564635px; animation-delay: 0.8s;"
/>
<i
style="height: 47.480789758355044px; animation-delay: 0.8500000000000001s;"
/>
<i
style="height: 56.615089141222136px; animation-delay: 0.9s;"
/>
<i
style="height: 59.492984932238116px; animation-delay: 0.9500000000000001s;"
/>
<i
style="height: 43.861291911681526px; animation-delay: 1s;"
/>
<i
style="height: 68.21866699734562px; animation-delay: 1.05s;"
/>
<i
style="height: 28.858982496016484px; animation-delay: 1.1s;"
/>
<i
style="height: 73.07841912260051px; animation-delay: 1.1500000000000001s;"
/>
<i
style="height: 12.60436847039135px; animation-delay: 1.2000000000000002s;"
/>
<i
style="height: 73.74953619965402px; animation-delay: 1.25s;"
/>
<i
style="height: 23.8231850360459px; animation-delay: 1.3s;"
/>
<i
style="height: 32.57029511072814px; animation-delay: 1.35s;"
/>
<i
style="height: 20.99981090780238px; animation-delay: 1.4000000000000001s;"
/>
<i
style="height: 29.735764963203792px; animation-delay: 1.4500000000000002s;"
/>
<i
style="height: 26.085500220240995px; animation-delay: 1.5s;"
/>
<i
style="height: 25.59070868046883px; animation-delay: 1.55s;"
/>
<i
style="height: 30.10305417152866px; animation-delay: 1.6s;"
/>
<i
style="height: 20.410372983416416px; animation-delay: 1.6500000000000001s;"
/>
<i
style="height: 32.785692656480826px; animation-delay: 1.7000000000000002s;"
/>
</div>
<span>
소음 사이, 숨겨진 한마디
</span>
</div>
</div>
</section>
<section
aria-labelledby="setup-title"
class="setup-card"
>
<div
class="setup-heading"
>
<span
class="section-number"
>
01
</span>
<div>
<h2
id="setup-title"
>
나의 소리 탐험 준비
</h2>
<p>
편한 방식으로 시작하세요. 난이도는 조금씩 높아져요.
</p>
</div>
<span
class="round-badge"
>
약 3–5분
</span>
</div>
<div
class="setup-grid"
>
<fieldset
class="mode-field"
>
<legend>
어떻게 답할까요?
</legend>
<div
class="mode-options"
>
<label
class="mode-option selected"
>
<input
aria-label="골고루 풀기"
checked=""
name="mode"
type="radio"
value="mixed"
/>
<span
aria-hidden="true"
class="mode-icon"
>
◈
</span>
<strong>
골고루 풀기
</strong>
<small>
선택 + 직접 입력
</small>
</label>
<label
class="mode-option "
>
<input
aria-label="보기에서 선택"
name="mode"
type="radio"
value="choice"
/>
<span
aria-hidden="true"
class="mode-icon"
>
☷
</span>
<strong>
보기에서 선택
</strong>
<small>
4개 단어 중 하나
</small>
</label>
<label
class="mode-option "
>
<input
aria-label="직접 입력"
name="mode"
type="radio"
value="text"
/>
<span
aria-hidden="true"
class="mode-icon"
>
✎
</span>
<strong>
직접 입력
</strong>
<small>
기억한 단어 쓰기
</small>
</label>
</div>
</fieldset>
<div
class="environment-field"
>
<label
for="environment"
>
배경 환경
</label>
<select
id="environment"
>
<option
value="rotate"
>
여덟 가지 일상 속으로
</option>
<option
value="street"
>
길거리
</option>
<option
value="mall"
>
쇼핑몰
</option>
<option
value="theater"
>
극장
</option>
<option
value="department"
>
백화점
</option>
<option
value="market"
>
시장
</option>
<option
value="subway"
>
지하철
</option>
<option
value="cafe"
>
카페
</option>
<option
value="rain"
>
비 오는 거리
</option>
</select>
<p>
길거리부터 비 오는 거리까지, 매번 다른 공간을 만나요.
</p>
<div
class="environment-chips"
>
<span>
길거리
</span>
<span>
카페
</span>
<span>
지하철
</span>
<span>
+5개 환경
</span>
</div>
</div>
</div>
<div
class="volume-row"
>
<label
for="volume"
>
<span
aria-hidden="true"
>
◖))
</span>
 전체 음량
</label>
<input
id="volume"
max="100"
min="0"
type="range"
value="35"
/>
<output
for="volume"
>
35
%
</output>
</div>
<div
class="start-row"
>
<p>
<span
aria-hidden="true"
>
♬
</span>
 편안한 작은 음량으로 시작해 보세요.
</p>
<button
class="primary"
>
게임 시작 · 소리 듣기 
<span
aria-hidden="true"
>
→
</span>
</button>
</div>
</section>
<section
aria-labelledby="howto-title"
class="howto"
id="howto"
>
<h2
id="howto-title"
>
작은 단어를 발견하는 방법
</h2>
<div
class="steps"
>
<article>
<span>
01
</span>
<h3>
먼저, 귀 기울이기
</h3>
<p>
에스의 안내와 소음 속 문장을 들어요.
<br />
처음에는 또렷하게, 점점 더 작게.
</p>
</article>
<article>
<span>
02
</span>
<h3>
기억한 단어 찾기
</h3>
<p>
소리가 끝나면 질문이 나타나요.
<br />
보기에서 고르거나 직접 입력해요.
</p>
</article>
<article>
<span>
03
</span>
<h3>
나의 발견 돌아보기
</h3>
<p>
열 문제 뒤 나의 결과를 확인해요.
<br />
놓쳤다면 언제든 다시 들어도 좋아요.
</p>
</article>
</div>
</section>
</main>
<footer
class="footer wrap"
>
<p>
Designed by OZ at Heat-T Medical Inc.
</p>
<p>
청각적 주의·식별 게임 · 의료적 진단이나 치료를 제공하지 않습니다.
</p>
<span>
개인정보 수집 없이, 오직 플레이만.
</span>
</footer>
</div>
</body>
❯ Object.getElementError node_modules/@testing-library/dom/dist/config.js:37:19
❯ getAllByLabelText node_modules/@testing-library/dom/dist/queries/label-text.js:111:38
❯ node_modules/@testing-library/dom/dist/query-helpers.js:52:17
❯ node_modules/@testing-library/dom/dist/query-helpers.js:95:19
❯ tests/App.test.tsx:400:37
398| it("5단계 완료는 6단계 대신 같은 단계의 새 세 문항을 시작한다", async () => {
399| const f = fixture();
400| await f.user.selectOptions(screen.getByLabelText("시작 난이도"), "5");
| ^
401| await f.user.click(screen.getByRole("radio", { name: "보기에서 선택" }));
402| await f.user.click(screen.getByRole("button", { name: "게임 시작 · 소리 듣기…
⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯[10/10]⎯
Test Files 1 failed (1)
Tests 10 failed | 8 passed (18)
Start at 07:58:09
Duration 3.29s (tests 75%, environment 18%, setup 3%, transform 2%, import 1%)