Skip to content

Commit e8c6ea5

Browse files
NatshahNatshah
committed
Add comprehensive scroll step definitions for webship-js testing framework #201 
1 parent cc7e124 commit e8c6ea5

File tree

4 files changed

+390
-55
lines changed

4 files changed

+390
-55
lines changed

‎examples/test--when--i-scroll-functionality.html‎

Lines changed: 176 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,176 @@
1+
<!DOCTYPE html>
2+
<html>
3+
4+
<head>
5+
<meta charset='utf-8'>
6+
<title>Complete Scroll Functionality Test</title>
7+
<style>
8+
body {
9+
margin: 0;
10+
padding: 20px;
11+
font-family: Arial, sans-serif;
12+
}
13+
14+
.container,
15+
.container input,
16+
.container button {
17+
font-size: 26px;
18+
}
19+
20+
.style {
21+
font-size: 22px;
22+
line-height: 30px;
23+
border: 1px solid #ccc;
24+
padding: 10px;
25+
margin: 5px 0;
26+
background-color: #f9f9f9;
27+
}
28+
29+
.indicator {
30+
font-size: 28px;
31+
font-weight: bold;
32+
color: #007bff;
33+
padding: 15px;
34+
margin: 10px 0;
35+
border: 2px solid #007bff;
36+
background-color: #e7f3ff;
37+
display: none;
38+
}
39+
40+
#scrollable-container {
41+
height: 300px;
42+
overflow-y: auto;
43+
border: 2px solid #333;
44+
margin: 20px 0;
45+
padding: 10px;
46+
background-color: #f0f0f0;
47+
}
48+
49+
.scrollable-content {
50+
height: 800px;
51+
background: linear-gradient(to bottom, #ff9999, #99ff99, #9999ff);
52+
padding: 20px;
53+
position: relative;
54+
}
55+
56+
.scroll-marker {
57+
position: absolute;
58+
font-size: 18px;
59+
font-weight: bold;
60+
background-color: rgba(255, 255, 255, 0.8);
61+
padding: 5px 10px;
62+
border-radius: 5px;
63+
}
64+
65+
.scroll-marker.top {
66+
top: 10px;
67+
left: 10px;
68+
}
69+
70+
.scroll-marker.bottom {
71+
bottom: 10px;
72+
right: 10px;
73+
}
74+
75+
#complete {
76+
font-size: 32px;
77+
line-height: 40px;
78+
color: #28a745;
79+
font-weight: bold;
80+
text-align: center;
81+
padding: 20px;
82+
border: 3px solid #28a745;
83+
background-color: #d4edda;
84+
margin: 20px 0;
85+
}
86+
87+
</style>
88+
</head>
89+
90+
<body>
91+
<h1>Complete Scrolling Functionality Test Page</h1>
92+
93+
<!-- Indicators for different scroll actions -->
94+
<div id="basic-scroll-down" class="indicator">Basic scroll down works</div>
95+
<div id="basic-scroll-up" class="indicator">Basic scroll up works</div>
96+
<div id="custom-scroll-down" class="indicator">Custom scroll down works</div>
97+
<div id="custom-scroll-up" class="indicator">Custom scroll up works</div>
98+
<div id="scroll-to-top" class="indicator">Scroll to top works</div>
99+
100+
<!-- Main content container -->
101+
<div id="container">
102+
<p class="style">This is the starting content of the page</p>
103+
</div>
104+
105+
<!-- Scrollable element container -->
106+
<h2>Scrollable Container Test</h2>
107+
<div id="scrollable-container">
108+
<div class="scrollable-content">
109+
<div class="scroll-marker top">Element scroll to top works</div>
110+
<p>This is a scrollable container with a lot of content inside.</p>
111+
<p>You can scroll within this container independently of the main page.</p>
112+
<p>This content demonstrates element-specific scrolling functionality.</p>
113+
<div class="scroll-marker bottom">Element scroll to bottom works</div>
114+
</div>
115+
</div>
116+
117+
<!-- Bottom completion message -->
118+
<div id="complete">Scroll to bottom works</div>
119+
120+
</body>
121+
122+
<script>
123+
// Generate content to make the page long enough for scrolling
124+
const container = document.getElementById("container");
125+
126+
for(var i = 1; i <= 30; i++){
127+
container.innerHTML += '<p class="style">Container content section #' + i + ' - This adds height to test scrolling</p>';
128+
}
129+
130+
// Add scroll event listeners to show appropriate indicators
131+
let scrollTimeout;
132+
133+
window.addEventListener('scroll', function() {
134+
clearTimeout(scrollTimeout);
135+
scrollTimeout = setTimeout(function() {
136+
const scrollY = window.scrollY;
137+
const windowHeight = window.innerHeight;
138+
const documentHeight = document.documentElement.scrollHeight;
139+
140+
// Hide all indicators first
141+
document.querySelectorAll('.indicator').forEach(el => el.style.display = 'none');
142+
143+
// Show appropriate indicator based on scroll position
144+
if (scrollY === 0) {
145+
document.getElementById('scroll-to-top').style.display = 'block';
146+
} else if (scrollY >= 300 && scrollY <= 400) {
147+
document.getElementById('basic-scroll-down').style.display = 'block';
148+
} else if (scrollY >= 450 && scrollY <= 550) {
149+
document.getElementById('custom-scroll-down').style.display = 'block';
150+
} else if (scrollY + windowHeight >= documentHeight - 50) {
151+
// Near bottom of page
152+
if (window.lastScrollDirection === 'up') {
153+
document.getElementById('custom-scroll-up').style.display = 'block';
154+
}
155+
}
156+
157+
// Track scroll direction
158+
if (scrollY > (window.lastScrollY || 0)) {
159+
window.lastScrollDirection = 'down';
160+
} else {
161+
window.lastScrollDirection = 'up';
162+
}
163+
window.lastScrollY = scrollY;
164+
165+
}, 100);
166+
});
167+
168+
// Add scroll event listener for the scrollable container
169+
const scrollableContainer = document.getElementById('scrollable-container');
170+
scrollableContainer.addEventListener('scroll', function() {
171+
// This helps test element-specific scrolling
172+
console.log('Scrollable container scrolled to:', this.scrollTop);
173+
});
174+
175+
</script>
176+
</html>

‎examples/test--when--i-scroll-to-the-bottom.html‎

Lines changed: 0 additions & 49 deletions
This file was deleted.

‎tests/features/test--when--i-scroll.feature‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
Feature: Complete scrolling functionality test
2+
As a tester,
3+
I want to test all scrolling step definitions to ensure they work correctly.
4+
5+
Scenario: Test basic scroll down functionality
6+
Given I am on "/test--when--i-scroll-functionality.html"
7+
When I scroll down
8+
Then I should see "Basic scroll down works"
9+
10+
Scenario: Test basic scroll up functionality
11+
Given I am on "/test--when--i-scroll-functionality.html"
12+
When I scroll to the bottom
13+
And I scroll up
14+
Then I should see "Basic scroll up works"
15+
16+
Scenario: Test scroll down with custom value
17+
Given I am on "/test--when--i-scroll-functionality.html"
18+
When I scroll down 500
19+
Then I should see "Custom scroll down works"
20+
21+
Scenario: Test scroll up with custom value
22+
Given I am on "/test--when--i-scroll-functionality.html"
23+
When I scroll to the bottom
24+
And I scroll up 300
25+
Then I should see "Custom scroll up works"
26+
27+
Scenario: Test scroll to top functionality
28+
Given I am on "/test--when--i-scroll-functionality.html"
29+
When I scroll to the bottom
30+
And I scroll to top
31+
Then I should see "Scroll to top works"
32+
33+
Scenario: Test scroll to bottom functionality
34+
Given I am on "/test--when--i-scroll-functionality.html"
35+
When I scroll to the bottom
36+
Then I should see "Scroll to bottom works"
37+
38+
39+
Scenario: Test scroll to top of element
40+
Given I am on "/test--when--i-scroll-functionality.html"
41+
When I scroll to bottom of "#scrollable-container"
42+
And I scroll to top of "#scrollable-container"
43+
Then I should see "Element scroll to top works"
44+
45+
Scenario: Test scroll to bottom of element
46+
Given I am on "/test--when--i-scroll-functionality.html"
47+
When I scroll to bottom of "#scrollable-container"
48+
Then I should see "Element scroll to bottom works"

0 commit comments

Comments
 (0)