Skip to content

Commit 7bf9a8f

Browse files
TasneemNatshahTasneemNatshah
committed
Add AJAX Waiting Step Definition #235 
1 parent 809fb38 commit 7bf9a8f

File tree

6 files changed

+223
-18
lines changed

6 files changed

+223
-18
lines changed

‎examples/ajax-wait-examples.html‎

Lines changed: 147 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,147 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>AJAX Wait Examples - Webship Testing</title>
7+
<style>
8+
body {
9+
font-family: Arial, sans-serif;
10+
max-width: 1200px;
11+
margin: 0 auto;
12+
padding: 20px;
13+
background: #f5f5f5;
14+
}
15+
.example-section {
16+
background: white;
17+
padding: 20px;
18+
margin: 20px 0;
19+
border-radius: 8px;
20+
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
21+
}
22+
button {
23+
background: #007bff;
24+
color: white;
25+
border: none;
26+
padding: 10px 20px;
27+
border-radius: 4px;
28+
cursor: pointer;
29+
margin: 5px;
30+
}
31+
button:hover {
32+
background: #0056b3;
33+
}
34+
input {
35+
padding: 8px;
36+
margin: 5px;
37+
border: 1px solid #ddd;
38+
border-radius: 4px;
39+
width: 300px;
40+
}
41+
table {
42+
width: 100%;
43+
border-collapse: collapse;
44+
margin: 10px 0;
45+
}
46+
th, td {
47+
border: 1px solid #ddd;
48+
padding: 10px;
49+
text-align: left;
50+
}
51+
th {
52+
background: #f8f9fa;
53+
}
54+
.success-message {
55+
color: green;
56+
padding: 10px;
57+
margin: 10px 0;
58+
background: #d4edda;
59+
border-radius: 4px;
60+
}
61+
</style>
62+
</head>
63+
<body>
64+
<h1>AJAX Wait Testing Examples</h1>
65+
<p>This page demonstrates scenarios that require waiting for AJAX requests to complete.</p>
66+
67+
<!-- Example 1: AJAX Search -->
68+
<div class="example-section">
69+
<h2>Example 1: AJAX Search</h2>
70+
<input type="text" id="search-input" placeholder="Enter search term">
71+
<button onclick="performSearch()">Search</button>
72+
<div id="search-results-container"></div>
73+
</div>
74+
75+
<!-- Example 2: AJAX Form Submission -->
76+
<div class="example-section">
77+
<h2>Example 2: AJAX Form Submission</h2>
78+
<input type="text" id="name-input" placeholder="Your Name"><br>
79+
<input type="email" id="email-input" placeholder="Your Email"><br>
80+
<button onclick="submitForm()">Submit</button>
81+
<div id="form-results-container"></div>
82+
</div>
83+
84+
<script>
85+
// Example 1: AJAX Search with XMLHttpRequest
86+
function performSearch() {
87+
const query = document.getElementById('search-input').value;
88+
document.getElementById('search-results-container').innerHTML = '<p>Loading...</p>';
89+
90+
// Simulate AJAX request
91+
const xhr = new XMLHttpRequest();
92+
xhr.open('GET', 'data:text/plain,success', true);
93+
94+
xhr.onload = function() {
95+
setTimeout(() => {
96+
document.getElementById('search-results-container').innerHTML = `
97+
<h3>Search Results</h3>
98+
<table>
99+
<tr>
100+
<th>Product</th>
101+
<th>Actions</th>
102+
</tr>
103+
<tr>
104+
<td>Laptop Pro 15</td>
105+
<td><button onclick="viewDetails('Laptop Pro 15')">View Details</button></td>
106+
</tr>
107+
</table>
108+
`;
109+
}, 500);
110+
};
111+
112+
xhr.send();
113+
}
114+
115+
function viewDetails(product) {
116+
document.getElementById('search-results-container').innerHTML = `
117+
<h3>Product Details</h3>
118+
<p>Showing details for ${product}</p>
119+
`;
120+
}
121+
122+
// Example 2: AJAX Form Submission with XMLHttpRequest
123+
function submitForm() {
124+
const name = document.getElementById('name-input').value;
125+
const email = document.getElementById('email-input').value;
126+
document.getElementById('form-results-container').innerHTML = '<p>Submitting...</p>';
127+
128+
// Simulate AJAX request
129+
const xhr = new XMLHttpRequest();
130+
xhr.open('POST', 'data:text/plain,success', true);
131+
132+
xhr.onload = function() {
133+
setTimeout(() => {
134+
document.getElementById('form-results-container').innerHTML = `
135+
<div class="success-message">
136+
<p>Form submitted successfully</p>
137+
<p>Thank you, ${name}</p>
138+
</div>
139+
`;
140+
}, 800);
141+
};
142+
143+
xhr.send();
144+
}
145+
</script>
146+
</body>
147+
</html>

‎examples/dynamic-examples.html‎

Lines changed: 0 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -168,12 +168,6 @@ <h2>Example 11: AJAX Search</h2>
168168
<div id="search-results-container"></div>
169169
</div>
170170

171-
<!-- Example 12: Modal Dialog -->
172-
<div class="example-section">
173-
<h2>Example 12: Dynamic Modal</h2>
174-
<button onclick="openSettings()">Open Settings</button>
175-
</div>
176-
177171
<!-- Example 13: Infinite Scroll -->
178172
<div class="example-section">
179173
<h2>Example 13: Infinite Scroll</h2>

‎nightwatch.conf.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ module.exports = {
2323
globals: {
2424
assets_folder : "/test/assets/",
2525
min_wait_time: {
26-
page : 10000,
26+
page : 3000,
2727
before_scenario : 0,
2828
after_scenario : 0,
2929
before_step : 0,

‎tests/features/ajax-wait-examples.feature‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
Feature: AJAX Wait Examples
2+
As a tester
3+
I want to wait for AJAX requests to complete
4+
So that I can verify content that loads asynchronously
5+
6+
Background:
7+
Given I am on "/ajax-wait-examples.html"
8+
9+
# Example 1: Wait for AJAX to finish before verifying content
10+
Scenario: Wait for AJAX to finish after search
11+
When I fill in "laptop" for "#search-input" by attr
12+
And I press "Search" button
13+
And I wait for AJAX to finish
14+
Then I should see "Search Results"
15+
And I should see "Laptop Pro 15"
16+
17+
# Example 2: Wait for AJAX to finish after form submission
18+
Scenario: Wait for AJAX to finish after submitting form
19+
When I fill in "John Doe" for "#name-input" by attr
20+
And I fill in "[email protected]" for "#email-input" by attr
21+
And I press "Submit" button
22+
And I wait for AJAX to finish
23+
Then I should see "Form submitted successfully"
24+
And I should see "Thank you, John Doe"

‎tests/features/dynamic-content-examples.feature‎

Lines changed: 0 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -118,17 +118,6 @@ Feature: Dynamic Content Handling Examples
118118
When I click "View Details" in the "Laptop Pro 15" row
119119
Then I should see "Product Details"
120120

121-
# Example 12: Modal dialogs that appear dynamically
122-
Scenario: Interact with dynamically shown modal
123-
When I scroll down 2400
124-
And I wait 1 second
125-
When I click "Open Settings"
126-
And I wait 1 second
127-
Then I should see "Settings Modal"
128-
When I fill in "Dark" for "#theme-select" by attr
129-
And I press "Save Settings" button
130-
Then I should see "Settings saved"
131-
132121
# Example 13: Infinite scroll content loading
133122
Scenario: Load more content with infinite scroll
134123
When I scroll down 2600

‎tests/step-definitions/webship.js‎

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1906,6 +1906,57 @@ When(/^(I |we )*wait until( the)* page( is)* loaded*$/, function (pronounCase, t
19061906
return browser.waitForElementPresent('body', 10000);
19071907
});
19081908

1909+
/**
1910+
* Wait for AJAX requests to finish.
1911+
* This step waits for active XMLHttpRequest and Fetch API requests to complete.
1912+
*
1913+
* Example #1: When I wait for AJAX to finish
1914+
* Example #2: And I wait for AJAX to finish
1915+
* Example #3: When we wait for AJAX to finish
1916+
* Example #4: And wait for AJAX to finish
1917+
*
1918+
*/
1919+
When(/^(I |we )*wait for AJAX to finish$/, function (pronounCase) {
1920+
return browser.executeAsync(function(done) {
1921+
var maxAttempts = 20; // 20 attempts * 500ms = 10 seconds max
1922+
var attempts = 0;
1923+
1924+
var checkAjax = setInterval(function() {
1925+
attempts++;
1926+
1927+
// Check for active XMLHttpRequest requests
1928+
var activeXHR = window.XMLHttpRequest && window.XMLHttpRequest.active || 0;
1929+
1930+
// Check for active fetch requests (tracked via monkey-patching)
1931+
var activeFetch = window.__activeFetchCount || 0;
1932+
1933+
// Check if document is still loading
1934+
var documentLoading = document.readyState !== 'complete';
1935+
1936+
if (activeXHR === 0 && activeFetch === 0 && !documentLoading) {
1937+
clearInterval(checkAjax);
1938+
done({ finished: true, attempts: attempts });
1939+
} else if (attempts >= maxAttempts) {
1940+
clearInterval(checkAjax);
1941+
done({
1942+
finished: false,
1943+
attempts: attempts,
1944+
activeXHR: activeXHR,
1945+
activeFetch: activeFetch,
1946+
documentLoading: documentLoading
1947+
});
1948+
}
1949+
}, 500);
1950+
}, [], function(result) {
1951+
if (!result || !result.value || !result.value.finished) {
1952+
var debugInfo = result && result.value ?
1953+
` (XHR: ${result.value.activeXHR}, Fetch: ${result.value.activeFetch}, DocLoading: ${result.value.documentLoading})` : '';
1954+
console.warn('AJAX requests did not finish within timeout period' + debugInfo);
1955+
// Don't fail the test, just log a warning
1956+
}
1957+
});
1958+
});
1959+
19091960

19101961

19111962
/**

0 commit comments

Comments
 (0)