From 5872e24b6cf1804bcf000125d5c6f76f37f4b121 Mon Sep 17 00:00:00 2001 From: Vladimir Airikh Date: Tue, 20 Oct 2020 11:56:58 +0300 Subject: [PATCH] Add the "Web page going to the background" example (#23) * Add the "blur window" example Co-authored-by: arminal Co-authored-by: Sergey Afonchenko <49588154+DIRECTcut@users.noreply.github.com> --- examples/blur-window/README.md | 23 +++++++++++++++++++++++ examples/blur-window/index.html | 14 ++++++++++++++ examples/blur-window/index.js | 15 +++++++++++++++ 3 files changed, 52 insertions(+) create mode 100644 examples/blur-window/README.md create mode 100644 examples/blur-window/index.html create mode 100644 examples/blur-window/index.js diff --git a/examples/blur-window/README.md b/examples/blur-window/README.md new file mode 100644 index 0000000..0cf7bad --- /dev/null +++ b/examples/blur-window/README.md @@ -0,0 +1,23 @@ +# Simulate the Web Page Losing Focus + +**Test Code**: [index.js](index.js) + +**Tested Page**: [index.html](index.html) + +This example demonstrates how to simulate the web page losing focus. + +The tested page includes a script. When the user switches to another tab or minimizes the main window, the script logs a message to the console. + +Before the test begins, a `ClientFunction` is declared. When called, this function employs the [EventTarget.dispatchEvent](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/dispatchEvent) method to dispatch a [blur Event](https://developer.mozilla.org/en-US/docs/Web/API/Element/blur_event) at the main window. + +During the test, the `t.expect.ok` method asserts that the client function has fired. + +## TestCafe Functions and Methods Used in This Example + +1. Test Structure: + - [Fixture.page](https://devexpress.github.io/testcafe/documentation/reference/test-api/fixture/page.html) Method + - [test](https://devexpress.github.io/testcafe/documentation/reference/test-api/global/test.html) Function +2. Assertion and Evaluation: + - [t.expect.ok](https://devexpress.github.io/testcafe/documentation/reference/test-api/testcontroller/expect/ok.html) Method +3. Custom Scripts: + - [ClientFunction](https://devexpress.github.io/testcafe/documentation/reference/test-api/clientfunction/) Object \ No newline at end of file diff --git a/examples/blur-window/index.html b/examples/blur-window/index.html new file mode 100644 index 0000000..14501ee --- /dev/null +++ b/examples/blur-window/index.html @@ -0,0 +1,14 @@ + + + + + The web page in the background + + + + + diff --git a/examples/blur-window/index.js b/examples/blur-window/index.js new file mode 100644 index 0000000..8b2b92b --- /dev/null +++ b/examples/blur-window/index.js @@ -0,0 +1,15 @@ +import { ClientFunction } from 'testcafe'; + +const blurWindow = ClientFunction(() => { + var blur = new Event('blur'); + + return window.dispatchEvent(blur); +}) + +fixture `The web page in the background` + .page `./index.html`; + +test('dispatch the "blur" event', async t => { + await t + .expect(blurWindow()).ok(); +});