testCaseCount 13
browserCount 1
testCount 13
testStepCount 201

testCaseFailureCount 2
testCaseErrorCount 0
testCaseIgnoredCount 0
testCaseNotOkCount 2
testCaseOkCount 11
testFailureCount 2
testErrorCount 0
testIgnoredCount 0

testCaseFailurePercentage 15
testCaseErrorPercentage 0
testCaseIgnoredPercentage 0
testCaseOkPercentage 85
testFailurePercentage 15
testErrorPercentage 0
testIgnoredPercentage 0
testNotOkPercentage 15
testOkPercentage 85

stepsOkCount 198
stepsFailureCount 3
stepsErrorCount 0
stepsIgnoredCount 0
stepsNotOkCount 3

stepsOkPercentage 99
stepsFailurePercentage 1
stepsErrorPercentage 0
stepsIgnoredPercentage 0
Wetator
Tests: 13error Errors: 0failure Failures: 2 Distribution: 13 TestCases / 1 Browser Start Time: 17.08.2022 19:04:37 Total Time: 00:00:41
show/hide TestCases & -Steps
Configuration show/hide ConfigurationVariables show/hide Variables
Show all TestCases
NoNameStepsGraphDuration
7failuredialogs-custom.wettFirefox10/10
           
3s
12failuretabs-Hyperscript.wettFirefox21/21
                      
2.8s

failure C:\RBRi\git_repo\wetator\samples\htmx\.\dialogs-custom.wett (Firefox)

Line Command  Parameter 1Parameter 2 Duration
1successopen-urlview response/-Show/Hide log entries0.7s
2successassert-title</> htmx - Examples-0.0s
4failureclick-onview highlightview responseDialogs - Custom-Show/Hide log entries2s
next failure/errorExecuting javascript on page failed (reason: 'identifier is a reserved word: class (https://unpkg.com/hyperscript.org#1)').
5successassert-title</> htmx - high power tools for html-0.0s
6successassert-contentCustom Modal Dialogs-0.0s
7 the dialog is at the end of the content (see the check after the next click-on)-0.0s
8successassert-contentCustom Stylesheet, ~This is the modal content.-0.0s
10successclick-onview highlightview responseOpen a Modal-Show/Hide log entries0.3s
11successassert-contentCustom Stylesheet, Modal Dialog, This is the modal content. You can put anything here, like text, or a form, or an image., Close-0.0s
13successclick-onview highlightview responseClose-Show/Hide log entries0.0s
14failureassert-contentview responseCustom Stylesheet, ~This is the modal content.-0.0s
previous failure/errornext failure/errorExpected content(s) {found but should not}: 'Custom Stylesheet, {~This is the modal content.}' (content: '</> htmx docs reference examples talk sponsor Star 7,622 Custom Modal Dialogs While htmx works great with dialogs built into CSS frameworks (like Bootstrap and UIKit), htmx also makes it easy to build modal dialogs from scratch. Here is a quick example of one way to build them. Click here to see a demo of the final result: Open a Modal High Level Plan We're going to make a button that loads remote content from the server, then displays it in a modal dialog. The modal content will be added to the end of the <body> element, in a div named #modal. We'll define some nice animations in CSS, and use some Hyperscript events (or alternatively, Javascript) to remove the modals from the DOM when the user is done. This requires you to add a minimal amount of extra markup around your modal HTML. Main Page HTML <button hx-get="/modal" hx-target="body" hx-swap="beforeend">Open a Modal</button> Modal HTML Fragment <div id="modal" _="on closeModal add .closing then wait for animationend then remove me"> <div class="modal-underlay" _="on click trigger closeModal"></div> <div class="modal-content"> <h1>Modal Dialog</h1> This is the modal content. You can put anything here, like text, or a form, or an image. <br> <br> <button _="on click trigger closeModal">Close</button> </div> </div> Custom Stylesheet /***** MODAL DIALOG ****/ #modal { /* Underlay covers entire screen. */ position: fixed; top:0px; bottom: 0px; left:0px; right:0px; background-color:rgba(0,0,0,0.5); z-index:1000; /* Flexbox centers the .modal-content vertically and horizontally */ display:flex; flex-direction:column; align-items:center; /* Animate when opening */ animation-name: fadeIn; animation-duration:150ms; animation-timing-function: ease; } #modal > .modal-underlay { /* underlay takes up the entire viewport. This is only required if you want to click to dismiss the popup */ position: absolute; z-index: -1; top:0px; bottom:0px; left: 0px; right: 0px; } #modal > .modal-content { /* Position visible dialog near the top of the window */ margin-top:10vh; /* Sizing for visible dialog */ width:80%; max-width:600px; /* Display properties for visible dialog*/ border:solid 1px #999; border-radius:8px; box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.3); background-color:white; padding:20px; /* Animate when opening */ animation-name:zoomIn; animation-duration:150ms; animation-timing-function: ease; } #modal.closing { /* Animate when closing */ animation-name: fadeOut; animation-duration:150ms; animation-timing-function: ease; } #modal.closing > .modal-content { /* Aniate when closing */ animation-name: zoomOut; animation-duration:150ms; animation-timing-function: ease; } @keyframes fadeIn { 0% {opacity: 0;} 100% {opacity: 1;} } @keyframes fadeOut { 0% {opacity: 1;} 100% {opacity: 0;} } @keyframes zoomIn { 0% {transform: scale(0.9);} 100% {transform: scale(1);} } @keyframes zoomOut { 0% {transform: scale(1);} 100% {transform: scale(0.9);} } haiku javascript fatigue: longing for a hypertext already in hand docs reference examples talk sponsor Modal Dialog This is the modal content. You can put anything here, like text, or a form, or an image. Close').
3s

topBack to top

failure C:\RBRi\git_repo\wetator\samples\htmx\.\tabs-Hyperscript.wett (Firefox)

Line Command  Parameter 1Parameter 2 Duration
1successopen-urlview response/-Show/Hide log entries0.8s
2successassert-title</> htmx - Examples-0.0s
4failureclick-onview highlightview responseTabs (Using Hyperscript)-Show/Hide log entries1.2s
previous failure/errorExecuting javascript on page failed (reason: 'identifier is a reserved word: class (https://unpkg.com/hyperscript.org#1)').
5successassert-title</> htmx - high power tools for html-0.0s
6successassert-contentTabs (Using Hyperscript)-0.0s
7successassert-contentDemo, Tab 1, Tab 2, Tab 3-0.0s
9successassert-contentDemo, Tab 1, Tab 2, Tab 3, Commodo normcore truffaut-0.0s
10successassert-contentDemo, Tab 1, Tab 2, Tab 3, ~Kitsch fanny pack-0.0s
11successassert-contentDemo, Tab 1, Tab 2, Tab 3, ~Aute chia marfa-0.0s
13successclick-onview highlightview responseTab 2-Show/Hide log entries0.3s
14successassert-contentDemo, Tab 1, Tab 2, Tab 3, ~Commodo normcore truffaut-0.0s
15successassert-contentDemo, Tab 1, Tab 2, Tab 3, Kitsch fanny pack-0.0s
16successassert-contentDemo, Tab 1, Tab 2, Tab 3, ~Aute chia marfa-0.0s
18successclick-onview highlightview responseTab 3-Show/Hide log entries0.3s
19successassert-contentDemo, Tab 1, Tab 2, Tab 3, ~Commodo normcore truffaut-0.0s
20successassert-contentDemo, Tab 1, Tab 2, Tab 3, ~Kitsch fanny pack-0.0s
21successassert-contentDemo, Tab 1, Tab 2, Tab 3, Aute chia marfa-0.0s
23successclick-onview highlightview responseTab 1-Show/Hide log entries0.3s
24successassert-contentDemo, Tab 1, Tab 2, Tab 3, Commodo normcore truffaut-0.0s
25successassert-contentDemo, Tab 1, Tab 2, Tab 3, ~Kitsch fanny pack-0.0s
26successassert-contentDemo, Tab 1, Tab 2, Tab 3, ~Aute chia marfa-0.0s
2.8s

topBack to top


Created using Wetator version: local build.