@quickpickle/vitest-browser 0.0.3 → 0.2.0

package/tests/generic/browser-actions.feature

@@ -0,0 +1,193 @@
+Feature: Actions step definitions in Vitest Browser
+
+  As a developer or tester
+  I need to be sure that the step definitions work as promised
+
+  Background: Load the example HTML page
+    Given I render the "Example" component
+
+  Rule: Interaction: Clicking must be supported
+
+    Scenario: clicking on exact text
+      When I click on "Text"
+      Then "Text" should have been clicked
+      When I click on "Do CSS transitions affect Playwright awaits?"
+      And I wait for 1000ms
+      Then I should see "AI says:"
+
+    @should-fail
+    Scenario: clicking on inexact text FAILS
+      When I click on "Do CSS transitions"
+
+    @should-fail
+    Scenario: clicking on hidden elements FAILS
+      When I click on "Hidden item"
+
+    @should-fail
+    Scenario: clicking on invisible elements FAILS
+      When I click on "Invisible item"
+
+    @todo
+    Scenario: clicking on elements by css selector
+      When I click the 'a[href="#faq"]' element
+      Then the url should contain "faq"
+
+    Scenario: clicking on elements by role
+      When I click the "Image" link
+      Then the "Image" link should have been clicked
+
+  Rule: Interaction: Focusing must be supported
+
+    Scenario: focusing on exact text
+      When I focus on "Text"
+      Then the "Text" link should be focused
+
+    @should-fail
+    Scenario: focusing on hidden elements fails
+      When I focus on "Do CSS transitions affect Playwright awaits?"
+
+    @should-fail
+    Scenario: focusing on non-selectable elements FAILS
+      When I focus on "Item 1"
+
+    @should-fail
+    Scenario: focusing on inexact text FAILS
+      When I focus on "List"
+
+    @todo
+    Scenario: Focusing on elements by css selector should work
+      When I focus the 'a[href="#faq"]' element
+      Then the "FAQ" link should be focused
+
+    Scenario: Focusing on elements by role should work
+      When I focus the "Image" link
+      Then the "Image" link should be focused
+
+  Rule: Typing must be supported
+
+    Scenario: Typing text into a textbox
+      When for "name" I type "David Hunt"
+      Then the value of "name" should be "David Hunt"
+      When for the "name" textbox I type " Sam Ziegler"
+      Then the value of the "name" textbox should be "David Hunt Sam Ziegler"
+
+    Scenario: Navigating through links
+      When I focus the "Lists" link
+      Then the "Lists" link should be focused
+      When I type the following keys: Tab Tab
+      Then the "Form" link should be focused
+      When I type the following keys: {Shift>} Tab {/Shift}
+      Then the "Table" link should be focused
+
+    Scenario: Navigating through form elements
+      When I activate the "Name" textbox
+      And I type the following keys: Tab Tab
+      Then the "Message" textbox should be focused
+      When I type the following keys: {Shift>} Tab {Shift}
+      Then the "Email" textbox should be focused
+
+  Rule: Form entry must be supported
+
+    @should-fail
+    Scenario: filling a disabled field FAILS
+      When for "From" I enter "anything"
+
+    Scenario: Filling one textbox
+      When for "Name" I fill in "David Hunt"
+      Then the value of "Name" should be "David Hunt"
+      When for "Name" I enter "Sam Ziegler"
+      Then the value of "Name" should be "Sam Ziegler"
+      When for "Name" I enter ""
+      Then the value of "Name" should be ""
+
+    Scenario: Filling a date field
+      When for "Date" I fill in "2024-10-21"
+      Then the value of "Date" should be "2024-10-21"
+
+    Scenario: Filling a number field
+      When for "Number" I enter "9"
+      Then the value of "Number" should be 9
+
+    Scenario: Selecting an option
+      When for "Color" I select "Red"
+      Then the value of "Color" should be "red"
+      When for "Color" I enter "- none -"
+      Then the value of "Color" should be ""
+
+    Scenario: Checking and unchecking a checkbox
+      When I check "I agree"
+      Then the "I agree" checkbox should be checked
+
+    Scenario: Checking a radio button
+      When I check "later"
+      Then the "later" radio should be checked
+      And the "now" radio should be unchecked
+
+    Scenario: Filling a whole form
+      When I fill in the following fields:
+        | Name | David Hunt |
+        | Email | git@github.com |
+        | Message | Hope this works! |
+        | Date | 2024-11-01 |
+        | Number | 493 |
+        | Color: | blue |
+        | later | true |
+        | I agree | no |
+      Then the value of "Name" should be "David Hunt"
+      And the value of "Email" should contain "git"
+      And the value of "Message" should be "Hope this works!"
+      And the value of "Date" should be "2024-11-01"
+      And the value of "Number" should be 493
+      And the value of "Color" should be "blue"
+      And the "later" radio should be checked
+      And the "I agree" checkbox should be unchecked
+
+  Rule: Waiting must be supported
+
+    Scenario: waiting for visible text works ONLY if the animation starts immediately
+      When I click on "Do CSS transitions affect Playwright awaits?"
+      Then I should see "AI says:"
+
+    @fails
+    Scenario: waiting for invisible text DOES NOT WORK
+      When I click on "Do CSS transitions affect Playwright awaits?"
+      Then I should NOT see "AI says:"
+
+  Rule: Scrolling must be supported
+
+    Scenario: Scrolling the full page
+      When I scroll down
+      Then the "HTML Test Page" heading should be outside the viewport
+      When I scroll up
+      Then the "HTML Test Page" heading should be inside the viewport
+
+    @todo
+    Scenario: Scrolling a particular div
+
+  Rule: Screenshots must be supported
+
+    Scenario: Taking a default screenshot
+      When I take a screenshot
+      Then the screenshot "Feature Actions step definitions in Vitest Browser_Taking a default screenshot_01.png" should exist--delete it
+
+    Scenario: Taking a named screenshot
+      When I take a screenshot named "pickles"
+      Then the screenshot "pickles.png" should exist--delete it
+
+    @tag1 @tag2 @sequential
+    Scenario: Taking a default screenshot with exploded tags
+      When I take a screenshot
+
+    @tag1 @tag2 @sequential
+    Scenario: Taking a named screenshot with exploded tags
+      When I take a screenshot named "temp"
+
+    @sequential
+    Scenario: Cleaning up the screenshots with exploded tags
+      Then the screenshot "Feature Actions step definitions in Vitest Browser_Taking a default screenshot with exploded tags (sequential,tag1)_01.png" should exist--delete it
+      And the screenshot "Feature Actions step definitions in Vitest Browser_Taking a default screenshot with exploded tags (sequential,tag2)_01.png" should exist--delete it
+
+    @sequential @skip-ci
+    Scenario: Cleaning up the screenshots with exploded tags
+      And the screenshot "temp_(sequential,tag1).png" should exist--delete it
+      And the screenshot "temp_(sequential,tag2).png" should exist--delete it

package/tests/generic/browser-generic.feature

@@ -0,0 +1,76 @@
+Feature: Basic tests of Vitest Browser Mode and steps
+
+  Background:
+    Given I render the "Example" component
+
+  @skip-ci
+  Rule: Visual regression testing must be supported
+
+    Example: Passing visual regression test
+      Then the screenshot should match
+
+    Example: Passing named visual regression test
+      Then the screenshot "visual-regression-example-page" should match
+
+    Example: Passing visual regression test of an element
+      Then the screenshot of the "XKCD Comic" img should match
+
+    @todo
+    Example: Passing named visual regression test of an element
+      Then the screenshot "visual-regression-faq-section" of the "#faq" element should match
+
+    @soft
+    Example: Failing visual regression test
+      When I take a screenshot of the "Image" link named "made-to-fail"
+      And I take a screenshot of the "FAQ" link named "faq"
+      Then the screenshot "made-to-fail.png.diff.png" should not exist
+      And the screenshot "made-to-fail.png.actual.png" should not exist
+      And the screenshot "made-to-fail" of the "FAQ" link should match
+      Then the screenshot "made-to-fail.png.diff.png" should not exist
+      And the screenshot "made-to-fail.png.actual.png" should exist--delete it
+      And the screenshot "faq.png" should exist--delete it
+      And the screenshot "made-to-fail.png" should exist--delete it
+      Then there should have been 1 error
+
+  @todo
+  Rule: Setting screenshot options must be supported
+
+    Scenario: Setting a screenshot mask
+      And the following world config:
+        ```yaml
+        screenshotOptions:
+          mask:
+            - form
+        ```
+      Then the screenshot should match
+
+    Scenario: Setting a clip area
+      And the following world config:
+        ```yaml
+          screenshotOptions:
+            clip:
+              x: 0
+              y: 60
+              width: 300
+              height: 180
+        ```
+      Then the screenshot should match
+
+  Rule: Screenshots should be placed in the proper directory
+
+    Scenario: Taking a screenshot
+      When I take a screenshot
+      Then the screenshot "Feature Basic tests of Vitest Browser Mode and steps_Taking a screenshot_01.png" should exist--delete it
+
+    Scenario: Taking a named screenshot
+      When I take a screenshot named "test"
+      Then the screenshot "test.png" should exist--delete it
+
+    Scenario: Taking a screenshot of an element
+      When I take a screenshot of the "Image" link
+      Then the screenshot "Feature Basic tests of Vitest Browser Mode and steps_Taking a screenshot of an element_01.png" should exist--delete it
+
+    Scenario: Taking a named screenshot of an element
+      When I take a screenshot of the "XKCD Comic" img named "test2"
+      Then the screenshot "test2.png" should exist--delete it
+

package/tests/generic/browser-outcomes.feature

@@ -0,0 +1,138 @@
+Feature: Outcome step definitions on a static page
+
+  As a developer or tester
+  I need to be sure that the step definitions work as promised
+
+  Background: Load the example HTML page
+    Given I render the "Example" component
+
+  Scenario: test if text is visible when a single element matches
+    Then I should see "Item 1"
+    And the text "Item 1" should be visible
+
+  Scenario: test if text is visible when multiple elements match
+    Then I should see "Image"
+    And the text "Image" should be visible
+
+  Scenario: test that text is not visible
+    Then I should not see "FWAH!!!"
+    And the text "FWAH!!!" should not be visible
+
+  Scenario: test that elements are visible with name and role
+    Then I should see an "Email:" textbox
+    And I should see a "Form" heading
+
+  Scenario: test that elements are visible with inexact name and role
+    Then I should see an "orm" heading
+
+  Scenario: test that elements are not visible
+    Then I should not see a "FWAH!!!" textbox
+    And I should not see a "Form" notheading
+
+  Scenario: test that an element hidden with display:none is not visible
+    Then I should not see "Hidden item"
+
+  Scenario: test that an element hidden with visibility:hidden is not visible
+    Then I should not see "Invisible item"
+
+  @todo
+  Scenario: test that elements matching text are visible
+    Then I should see an "h1" element with the text "HTML Test Page"
+    And I should see an "li" with the text "First item"
+
+  @todo
+  Scenario: test that elements matching text are not visible
+    Then I should NOT see an "h1" element with the text "FWAH!!!"
+    And I should NOT see a "fwah" element with the text "FWEEE!!!"
+
+  Rule: All of the ways of addressing an element should be tested
+
+    @todo
+    Example: it works to address an element with css selector
+      Then a "textarea#message" element should be visible
+      And an 'input[type="submit"]' element should be visible
+      And a "ul>li" element should be visible
+      And a "li.hidden" element should be hidden
+
+    @should-fail @todo
+    Example: it FAILS to address an element with a css selector AND a role other than "element"
+      Then a "ul>li" listitem should be visible
+
+    @todo
+    Example: it works to address an element with name and role
+      Then an "XKCD Comic" img should be visible
+      And a "message" textbox should be visible
+      And a "lists" link should be visible
+
+    @should-fail @todo
+    Example: it FAILS to address an element with name and role IF the element is hidden
+      And a "Hidden item" listitem should be hidden
+
+    @todo
+    Example: it works to address an element with css selector and text
+      Then the 'a[href="https://xkcd.com/2928"]' element with the text "2928" should be visible
+      And the "li.hidden" element with the text "Hidden item" should be hidden
+
+  Rule: Testing for invisible elements should be possible
+
+    @todo
+    Scenario: "I should not see" does not ensure presence of invisible elements
+      Then I should not see an "li.absent" with the text "nothing"
+
+    @todo
+    Scenario: "the {string} should be hidden" passes when elements are present and invisible
+      Then the "li.hidden" element should be invisible
+
+    @should-fail @todo
+    Scenario: "the {string} should be hidden" FAILS when elements are not present
+      Then the "li.imaginary" element should be invisible
+
+  Rule: Testing for disabled / enabled state should be possible
+
+    Scenario: test that elements are disabled
+      Then the "From" textbox should be disabled
+
+    Scenario: test that elements are enabled
+      Then the "Email" textbox should be enabled
+
+  Rule: Testing for checked / unchecked state should be possible
+
+    Scenario: Checking a checkbox
+      Then the "I agree" checkbox should be unchecked
+      When I click the "I agree" checkbox
+      Then the "I agree" checkbox should be checked
+
+    Scenario: Checking a radio button
+      Then the "now" radio should be checked
+      When I click the "later" radio
+      Then the "now" radio should be unchecked
+      And the "later" radio should be checked
+
+  Rule: Testing for focused / unfocused state should be possible
+
+    Scenario: navigating through the form
+      When I click the "Name" textbox
+      Then the "Name" textbox should be focused
+      When I activate the "Email" textbox
+      Then the "Name" textbox should be blurred
+      And the "Email" textbox should be focused
+      When I type the following keys: Tab
+      Then the "Email" textbox should be blurred
+      And the "Message" textbox should be focused
+
+  Rule: Testing for form input values should be possible
+
+    Scenario: default values should be available
+      Then the value of the "From" textbox should be "example@example.com"
+      And the value of the "From" textbox should contain "example"
+      And the value of the "From" textbox should not include "FWAH!"
+      And the value of the "From" textbox should NOT be "example"
+      And the value of "From" should contain "example"
+      And the value of "From" should NOT be "example"
+
+    Scenario: date values
+      Then the value of the "Date" textbox should be "2024-10-19"
+      When I focus on the "Date" textbox
+      And I type the following keys: ArrowLeft ArrowLeft ArrowLeft ArrowUp
+      Then the value of the "Date" textbox should be "2024-11-19"
+

package/tests/generic/generic.steps.ts

@@ -0,0 +1,27 @@
+import { Before, Then } from 'quickpickle'
+import type { VitestBrowserWorld } from '../../src/VitestBrowserWorld'
+import { expect } from 'vitest'
+import { commands } from '@vitest/browser/context'
+
+
+
+// Screenshots
+Then('the screenshot {string} should exist(--delete it)', async function (world:VitestBrowserWorld, filepath:string) {
+  let fullpath = world.fullPath(`${world.screenshotDir}/${filepath}`)
+  await expect(commands.readFile(fullpath)).toBeTruthy();
+  if (world.info.step?.match(/--delete it$/)) await commands.removeFile(fullpath)
+})
+Then('the screenshot {string} should not exist', async function (world:VitestBrowserWorld, filepath:string) {
+  let fullpath = world.fullPath(`${world.screenshotDir}/${filepath}`)
+  try {
+    await commands.readFile(fullpath);
+    throw new Error(`Screenshot ${filepath} should not exist`)
+  }
+  catch(e) {
+    if (!e.message.match(/ENOENT/i)) throw e
+  }
+})
+Then('there should have been {int} error(s)', async (world:VitestBrowserWorld, int:number) => {
+  expect(world.info.errors.length).toBe(int)
+  world.info.errors = []
+})

package/tests/svelte/Example.svelte

@@ -0,0 +1,153 @@
+<style>
+  .hidden { display:none; }
+  .invisible { visibility:hidden; }
+
+  .faq-item:has(input:checked) .faq-answer {
+    display: block;
+    max-height: 200px; /* Adjust this value based on your content */
+    transition: max-height 0.5s ease-in;
+  }
+  .faq-toggle { cursor: pointer;}
+  .faq-answer {
+    max-height: 0;
+    overflow: hidden;
+    transition: max-height 0.3s ease-out;
+  }
+  .faq-item {
+    cursor: pointer;
+  }
+  .faq-item input[type="checkbox"] {
+    display: none;
+  }
+</style>
+
+<header>
+  <h1>HTML Test Page</h1>
+  <nav>
+    <ul>
+      <li><a href="#text">Text</a></li>
+      <li><a href="#lists">Lists</a></li>
+      <li><a href="#table">Table</a></li>
+      <li><a href="#form">Form</a></li>
+      <li><a href="#faq">FAQ</a></li>
+      <li><a href="#image">Image</a></li>
+    </ul>
+  </nav>
+</header>
+
+<main>
+  <section id="text">
+    <h2>Text Elements</h2>
+    <p>This is a paragraph with <strong>bold</strong> and <em>italic</em> text.</p>
+    <p>Here's a <a href="https://www.example.com">link</a> to an example website.</p>
+    <blockquote>This is a blockquote.</blockquote>
+  </section>
+
+  <section id="lists">
+    <h2>Lists</h2>
+    <h3>Unordered List</h3>
+    <ul>
+      <li>Item 1</li>
+      <li>Item 2</li>
+      <li>Item 3</li>
+    </ul>
+    <h3>Ordered List</h3>
+    <ol>
+      <li>First item</li>
+      <li>Second item</li>
+      <li>Third item</li>
+      <li class="hidden">Hidden item</li>
+      <li class="invisible">Invisible item</li>
+    </ol>
+  </section>
+
+  <section id="table">
+    <h2>Table</h2>
+    <table border="1">
+      <thead>
+        <tr>
+          <th>Header 1</th>
+          <th>Header 2</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td>Row 1, Cell 1</td>
+          <td>Row 1, Cell 2</td>
+        </tr>
+        <tr>
+          <td>Row 2, Cell 1</td>
+          <td>Row 2, Cell 2</td>
+        </tr>
+      </tbody>
+    </table>
+  </section>
+
+  <section id="form">
+    <h2>Form</h2>
+    <form action="#" method="post">
+      <label for="name">Name:</label>
+      <input type="text" id="name" name="name" required><br><br>
+
+      <label for="email">Email:</label>
+      <input type="email" id="email" name="email" required><br><br>
+
+      <label for="message">Message:</label><br>
+      <textarea id="message" name="message" rows="4" cols="50"></textarea><br><br>
+
+      <label for="from">From:</label>
+      <input type="text" id="from" name="from" disabled value="example@example.com"><br><br>
+
+      <label for="date">Date:</label>
+      <input type="date" id="date" name="date" value="2024-10-19"><br><br>
+
+      <label for="number">Number:</label>
+      <input type="number" id="number" name="number"><br><br>
+
+      <label for="color">Color:</label>
+      <select id="color" name="color">
+        <option value="">- none -</option>
+        <option value="red">Red</option>
+        <option value="green">Green</option>
+        <option value="blue">Blue</option>
+      </select><br><br>
+
+      <div>Send this message:</div>
+      <input type="radio" name="sendtime" id="sendtime-now" value="now" checked>
+      <label for="sendtime-now">Now</label>
+      <input type="radio" name="sendtime" id="sendtime-later" value="later">
+      <label for="sendtime-later">Later</label><br><br>
+
+      <input type="checkbox" name="tnc" id="tnc">
+      <label for="tnc">I agree to the terms and conditions</label><br><br>
+
+      <input type="submit" value="Submit">
+    </form>
+  </section>
+
+  <section id="faq">
+    <h2>FAQ</h2>
+    <div class="faq-item" id="faq-item-1">
+      <label for="faq-1" class="faq-toggle">
+        <input type="checkbox" id="faq-1" class="faq-toggle">
+        <h3>Do CSS transitions affect Playwright awaits?</h3>
+      </label>
+      <p class="faq-answer">
+        AI says: "CSS transitions can affect Playwright awaits if not handled properly.
+        Playwright's default waiting mechanism might not account for CSS transitions,
+        potentially leading to flaky tests. It's important to use appropriate waiting
+        strategies or disable transitions in test environments to ensure consistency."
+      </p>
+    </div>
+  </section>
+
+  <section id="image">
+    <h2>Image</h2>
+    <img src="https://imgs.xkcd.com/comics/software_testing_day.png" alt="XKCD Comic 2928: Software Testing Day" width="320">
+    <p>Image source: <a href="https://xkcd.com/2928">xkcd.com/2928</a></p>
+  </section>
+</main>
+
+<footer>
+  <p>© 2023 HTML Test Page. All rights reserved.</p>
+</footer>

package/vite.config.ts

@@ -5,4 +5,12 @@ export default {
   optimizeDeps: {
     exclude: ['unicorn-magic'],
   },
+  test: {
+    quickpickle: {
+      failTags: ['@fail', '@fails', '@should-fail'],
+      explodeTags: [
+        ['@tag1', '@tag2'],
+      ],
+    }
+  }
 }