Skip to content

Commit 712ee84

Browse files
DIRECTcutMargaritaLosevamiherlosev
authored
Add the "Check if an image has loaded" example (#33)
* Add "Check if an image has loaded" example Co-authored-by: MargaritaLoseva <margarita.loseva@devexpress.com> Co-authored-by: miherlosev <miherlosev@mail.ru>
1 parent 5872e24 commit 712ee84

6 files changed

Lines changed: 92 additions & 9 deletions

File tree

‎README.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -78,6 +78,7 @@ The repository includes the following examples:
7878
* [Use XPath Selectors](examples/use-xpath-selectors)
7979
* [Wait Until an Element Property Has a Specific Value](examples/wait-for-element-property-value)
8080
* [Wait For File Download](examples/wait-for-file-download)
81+
* [Check If an Image Has Loaded](examples/check-if-image-loaded)
8182

8283
Below are the examples that run in Chrome or Firefox only or require additional launch arguments. You should launch these examples separately.
8384

‎examples/check-if-image-loaded/README.md‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
# Check If an Image Has Loaded
2+
3+
**Test Code**: [index.js](index.js)
4+
5+
**Tested Page**: [index.html](index.html)
6+
7+
This example shows how to check whether an image on the page has loaded.
8+
9+
The tested page requests an image from the server. The server responds with the image after a specified timeout.
10+
11+
If the image loads, the promise is resolved, otherwise it's rejected.
12+
13+
During the test, the `t.expect.ok` method waits for the promise to resolve and checks its result.
14+
15+
## TestCafe API in This Example
16+
17+
* Test Structure:
18+
* [Fixture.page](https://devexpress.github.io/testcafe/documentation/reference/test-api/fixture/page.html) Method
19+
* [test](https://devexpress.github.io/testcafe/documentation/reference/test-api/global/test.html) Function
20+
* Assertion and Evaluation:
21+
* [t.expect.ok](https://devexpress.github.io/testcafe/documentation/reference/test-api/testcontroller/expect/ok.html) Method
22+
* Custom Scripts:
23+
* [ClientFunction](https://devexpress.github.io/testcafe/documentation/reference/test-api/clientfunction/) Object
24+

‎examples/check-if-image-loaded/index.html‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
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>Check if Image Loaded</title>
7+
</head>
8+
<body>
9+
<div>
10+
<img id="img" src="http://localhost:3000/server/images/blacksquare.png?delay=15000">
11+
</div>
12+
</body>
13+
</html>

‎examples/check-if-image-loaded/index.js‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
import { ClientFunction } from 'testcafe';
2+
3+
const checkImageIsLoaded = ClientFunction(function() {
4+
const img = document.getElementById('img');
5+
6+
return new Promise(function(resolve, reject) {
7+
if (img.complete)
8+
resolve('Image is already loaded or rejected.');
9+
10+
img.addEventListener('load', function () {
11+
resolve('Image is loaded successfully.');
12+
});
13+
img.addEventListener('error', function () {
14+
reject('Error while loading image.');
15+
});
16+
});
17+
});
18+
19+
fixture`Check if image has loaded`
20+
.page('./index.html');
21+
22+
test('Check if image has loaded', async t => {
23+
await t.expect(checkImageIsLoaded()).eql('Image is loaded successfully.');
24+
});

‎server/images/blacksquare.png‎

453 Bytes
Loading

‎server/index.js‎

Lines changed: 30 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,9 @@
1-
const http = require('http');
2-
const fs = require('fs');
3-
const path = require('path');
4-
const multiparty = require('multiparty');
1+
const http = require('http');
2+
const fs = require('fs');
3+
const path = require('path');
4+
const multiparty = require('multiparty');
5+
const url = require('url');
6+
const querystring = require('querystring');
57

68
const SERVER_PORT = 3000;
79

@@ -14,10 +16,22 @@ const CONTENT_TYPES = {
1416
'.pdf': 'application/pdf'
1517
};
1618

19+
function isBinaryResource (contentType) {
20+
if(contentType === CONTENT_TYPES[".png"])
21+
return true;
22+
23+
return false;
24+
}
25+
26+
function stringifyContentIfNecessary (content, contentType) {
27+
if (!content)
28+
return content;
29+
30+
return isBinaryResource(contentType) ? content : content.toString();
31+
}
32+
1733
http
1834
.createServer((req, res) => {
19-
console.log(req.url);
20-
2135
if (req.url === '/download-file') {
2236
const fileStream = fs.createReadStream('./server/data/text-file.txt');
2337

@@ -47,16 +61,23 @@ http
4761
res.end(resultHtml);
4862
});
4963
}
64+
5065
else {
5166
const repositoryRoot = path.resolve(__dirname, '..');
52-
const resourcePath = path.join(repositoryRoot, req.url);
53-
const content = fs.existsSync(resourcePath) ? fs.readFileSync(resourcePath).toString() : '';
67+
const parsedUrl = url.parse(req.url);
68+
const resourcePath = path.join(repositoryRoot, parsedUrl.pathname);
69+
let content = fs.existsSync(resourcePath) ? fs.readFileSync(resourcePath) : void 0;
5470
const contentType = CONTENT_TYPES[path.extname(resourcePath)];
71+
const delay = parseInt(querystring.parse(parsedUrl.query).delay || 0);
72+
73+
content = stringifyContentIfNecessary(content, contentType);
5574

5675
if (contentType)
5776
res.setHeader('content-type', contentType);
5877

59-
res.end(content);
78+
setTimeout(() => {
79+
res.end(content);
80+
}, delay);
6081
}
6182
})
6283
.listen(SERVER_PORT);

0 commit comments

Comments
 (0)