## Test Suite Overview **Suite ID:** module.spec.ts **Test cases:** 6 This suite verifies that a page using Bootstrap 4 correctly hides content initially, displays it after loading, applies alert styles, and manages a single modal dialog. All tests share a setup that navigates to the root URL before each execution. Be aware that the modal launch test reads the modal's `aria-hidden` value before clicking the button, so it never looks at the post-click state. Several checks (the alert color comparison, the modal count and hidden state, and the modal launch check) pass a boolean to `expect()` without a matcher, so they assert nothing and always pass. Additionally, the alert style test explicitly waits for a specific external CSS response, so changes to the CDN URL or loading strategy will cause it to fail even if styling works correctly. - **Page Loading and Modal Tests** - **Unique Dependencies:** `@playwright/test` - **Body Hidden on Load** (dependencies: `@playwright/test`) - **Body Visible After Load** (dependencies: `@playwright/test`) - **Alert Style Applied** (dependencies: `@playwright/test`) - **Modal Count and State** (dependencies: `@playwright/test`) - **Modal Button Exists** (dependencies: `@playwright/test`) - **Modal Opens on Click** (dependencies: `@playwright/test`) --- ## Group 1: Body Hidden on Load, Body Visible After Load **Shared testing question:** How does the page manage the visibility state of the body element during the loading lifecycle? ### Body Hidden on Load _{[module.spec.ts:8-10](module.spec.ts#L8-L10)} **Test Objects** The page's `body` element **Test Goals** Confirm that the `body` element is hidden during initial page load. **Test Activities** - Step 1: Visit the homepage `/`. - Step 2: Check that the `body` element is hidden. ### Body Visible After Load _{[module.spec.ts:12-14](module.spec.ts#L12-L14)} **Test Objects** The page's `body` element **Test Goals** Confirm that the `body` element becomes visible after the page loads. **Test Activities** - Step 1: Visit the homepage `/`. - Step 2: Check that the `body` element eventually becomes visible. --- ## Group 2: Alert Style Applied **Shared testing question:** Are external stylesheets correctly applied to specific UI components? ### Alert Style Applied _{[module.spec.ts:16-26](module.spec.ts#L16-L26)} **Test Objects** The style of the `.alert-primary` element **Test Goals** Verify that the alert style is applied after Bootstrap CSS loads. **Test Activities** - Step 1: Visit the homepage `/`. - Step 2: Get the initial background color of the first `.alert-primary` element. - Step 3: Wait for the Bootstrap CSS request to complete. - Step 4: Get the background color of the same element again. - Step 5: Assert that the two colors are different. --- ## Group 3: Modal Count and State **Shared testing question:** How does the page ensure the correct presence, count, and initial state of modal dialogs? ### Modal Count and State _{[module.spec.ts:29-34](module.spec.ts#L29-L34)} **Test Objects** Modal element `[role="dialog"]` **Test Goals** Confirm that there is only one modal on the page, and its initial state is hidden. **Test Activities** - Step 1: Visit the homepage `/`. - Step 2: Locate the `[role="dialog"]` element. - Step 3: Assert that its quantity is 1. - Step 4: Get the `aria-hidden` attribute of this element. - Step 5: Assert that the attribute value is `"true"`. --- ## Group 4: Modal Button Exists, Modal Opens on Click **Shared testing question:** Is the trigger mechanism for opening a modal dialog present and functional? ### Modal Button Exists _{[module.spec.ts:36-39](module.spec.ts#L36-L39)} **Test Objects** "Launch demo modal" button **Test Goals** Confirm that a button for opening a modal exists on the page. **Test Activities** - Step 1: Visit the homepage `/`. - Step 2: Find the button element with the text `"Launch demo modal"`. - Step 3: Assert that the element is defined (exists). ### Modal Opens on Click _{[module.spec.ts:41-47](module.spec.ts#L41-L47)} **Test Objects** Modal `[role="dialog"]` and its launch button **Test Goals** Verify that the modal opens after clicking the button. **Test Activities** - Step 1: Access the homepage `/`. - Step 2: Locate the modal and obtain its `aria-hidden` attribute. - Step 3: Find the `"Launch demo modal"` button and click it. - Step 4: Check if the modal's `aria-hidden` attribute value is `"false"`.

About you

Your task

How to answer

Judge only what is on screen

When you finish

Onboarding Document

Thank you!