From 16286fc6d2de174f3d318dec4b6289c4ff049fb0 Mon Sep 17 00:00:00 2001
From: Sergey Afonchenko <49588154+DIRECTcut@users.noreply.github.com>
Date: Fri, 2 Oct 2020 11:54:22 +0300
Subject: [PATCH] Selectors examples (#31)

* Add 'iterate over list elements' example

* Mikhail's code review

* add select-table-rows-by-content

* Fix markup, add Readme

* Address Mikhail's review

* Address Mikhail's suggestions

* Address Mikhail's review

* Vasily's review
---
 examples/iterate-over-list-elements/README.md | 40 +++++++++++++++
 examples/iterate-over-list-elements/index.js  | 44 +++++++++++++++++
 .../README.md                                 | 27 ++++++++++
 .../index.html                                | 49 +++++++++++++++++++
 .../select-table-row-by-cell-content/index.js | 20 ++++++++
 5 files changed, 180 insertions(+)
 create mode 100644 examples/iterate-over-list-elements/README.md
 create mode 100644 examples/iterate-over-list-elements/index.js
 create mode 100644 examples/select-table-row-by-cell-content/README.md
 create mode 100644 examples/select-table-row-by-cell-content/index.html
 create mode 100644 examples/select-table-row-by-cell-content/index.js

diff --git a/examples/iterate-over-list-elements/README.md b/examples/iterate-over-list-elements/README.md
new file mode 100644
index 0000000..f361f52
--- /dev/null
+++ b/examples/iterate-over-list-elements/README.md
@@ -0,0 +1,40 @@
+# Iterate Over a List of Elements
+
+**Test Code**: [index.js](index.js)
+
+**Tested Page**: [TestCafe Example](https://devexpress.github.io/testcafe/example/)
+
+This example shows how to iterate over a list of elements and use their values in assertions.
+
+The tested page includes a list of `<input type="checkbox">` elements.
+
+The expected values of the list items and their ids are declared as an array of objects and have the following structure:
+
+```js
+[
+    {
+        id: 'id-of-the-first-checkbox',
+        text: 'Text of the first item'
+    },
+    {
+        ...
+    }
+]
+```
+
+The test clicks each of the list items to to check them. After that, the test uses the `Selector.count` property to obtain the number of input elements and iterates through the list of these elements in a `for` loop. Inside the loop, the input's text is compared to the expected value with the `t.expect.eql` method.
+
+## TestCafe API 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. Element Identification and Actions:
+    - [Selector](https://devexpress.github.io/testcafe/documentation/reference/test-api/selector/) Object
+    - [Selector.withExactText](https://devexpress.github.io/testcafe/documentation/reference/test-api/selector/withexacttext.html) Method
+    - [Selector.parent](https://devexpress.github.io/testcafe/documentation/reference/test-api/selector/parent.html) Method
+    - [Selector.child](https://devexpress.github.io/testcafe/documentation/reference/test-api/selector/child.html) Method
+    - [Selector.nth](https://devexpress.github.io/testcafe/documentation/reference/test-api/selector/nth.html) Method
+3. Assertion and Evaluation:
+    - [Selector.count](https://devexpress.github.io/testcafe/documentation/reference/test-api/selector/count.html) Property
+    - [t.expect.eql](https://devexpress.github.io/testcafe/documentation/reference/test-api/testcontroller/expect/eql.html) Method
diff --git a/examples/iterate-over-list-elements/index.js b/examples/iterate-over-list-elements/index.js
new file mode 100644
index 0000000..9559e7f
--- /dev/null
+++ b/examples/iterate-over-list-elements/index.js
@@ -0,0 +1,44 @@
+import { Selector } from 'testcafe';
+
+fixture `Iterate through list elements`
+    .page('https://devexpress.github.io/testcafe/example/');
+
+test('Iterate through list elements', async t => {
+    const elementInfos = [
+        {
+            id:   'remote-testing',
+            text: 'Support for testing on remote devices'
+        },
+        {
+            id:   'reusing-js-code',
+            text: 'Re-using existing JavaScript code for testing'
+        },
+        {
+            id:   'background-parallel-testing',
+            text: 'Running tests in background and/or in parallel in multiple browsers'
+        },
+        {
+            id:   'continuous-integration-embedding',
+            text: 'Easy embedding into a Continuous integration system'
+        },
+        {
+            id:   'traffic-markup-analysis',
+            text: 'Advanced traffic and markup analysis'
+        }
+    ];
+
+    for (const elementInfo of elementInfos)
+        await t.click(Selector(`#${elementInfo.id}`));
+
+    const checkboxes = Selector('legend')
+        .withExactText('Which features are important to you:')
+        .parent('fieldset').child('input[type=checkbox]');
+
+    const checkboxesCount = await checkboxes.count;
+
+    for (let i = 0; i < checkboxesCount; i++) {
+        const currentCheckbox = checkboxes.nth(i);
+        
+        await t.expect(currentCheckbox.textContent).eql(elementInfos[i].text);
+    }
+});
\ No newline at end of file
diff --git a/examples/select-table-row-by-cell-content/README.md b/examples/select-table-row-by-cell-content/README.md
new file mode 100644
index 0000000..ee8b186
--- /dev/null
+++ b/examples/select-table-row-by-cell-content/README.md
@@ -0,0 +1,27 @@
+# Select a Table Row by Cell Content
+
+**Test Code**: [index.js](index.js)
+
+**Tested Page**: [index.html](index.html)
+
+This example shows how to select a table row based on the cell content.
+
+The tested page includes a table with `Id`, `First name` and `Last name` columns and three rows of data. A click on a row highlights it.
+
+The test identifies the target row by the value of its `Id` column. Then it uses the `t.eql` method to verify cell values in this row and the `t.ok` method to check that it is highlighted.
+
+## TestCafe API 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. Element Identification and Actions:
+    * [Selector](https://devexpress.github.io/testcafe/documentation/reference/test-api/selector/) Object
+    * [t.click](https://devexpress.github.io/testcafe/documentation/reference/test-api/testcontroller/click.html) Method
+    * [Selector.withExactText](https://devexpress.github.io/testcafe/documentation/reference/test-api/selector/withexacttext.html) Method
+    * [Selector.parent](https://devexpress.github.io/testcafe/documentation/reference/test-api/selector/parent.html) Method
+    * [Selector.child](https://devexpress.github.io/testcafe/documentation/reference/test-api/selector/child.html) Method
+    * [Selector.nth](https://devexpress.github.io/testcafe/documentation/reference/test-api/selector/nth.html) Method
+    * [DOM Node State Object](https://devexpress.github.io/testcafe/documentation/reference/test-api/domnodestate.html): `hasClass` Method
+3. Assertion and Evaluation:
+    * [t.expect.eql](https://devexpress.github.io/testcafe/documentation/reference/test-api/testcontroller/expect/eql.html) Method
diff --git a/examples/select-table-row-by-cell-content/index.html b/examples/select-table-row-by-cell-content/index.html
new file mode 100644
index 0000000..35e5633
--- /dev/null
+++ b/examples/select-table-row-by-cell-content/index.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Select table rows</title>
+    <style>
+        .highlighted {
+            background-color: red;
+        }
+    </style>
+</head>
+<body>
+    <table>
+        <tr>
+            <th>Id</th>
+            <th>First Name</th>
+            <th>Last Name</th>
+        </tr>
+        <tr>
+            <td>1</td>
+            <td>John</td>
+            <td>Smith</td>
+        </tr>
+        <tr>
+            <td>2</td>
+            <td>Oliver</td>
+            <td>Black</td>
+        </tr>
+        <tr>
+            <td>3</td>
+            <td>Harry</td>
+            <td>Red</td>
+        </tr>
+    </table>
+
+    <script>
+        const rows    = document.querySelectorAll('tr');
+        const rowsArr = Array.prototype.slice.call(rows);
+
+        rowsArr.forEach(function (row) { 
+            row.addEventListener('click', function (e) {
+                rowsArr.forEach(row => row.removeAttribute('class'));
+                row.setAttribute('class', 'highlighted');
+            })
+        });
+    </script>
+</body>
+</html>
\ No newline at end of file
diff --git a/examples/select-table-row-by-cell-content/index.js b/examples/select-table-row-by-cell-content/index.js
new file mode 100644
index 0000000..4f99fc6
--- /dev/null
+++ b/examples/select-table-row-by-cell-content/index.js
@@ -0,0 +1,20 @@
+import { Selector } from 'testcafe'
+
+fixture `Select a table row by cell contents`
+    .page('./index.html')
+
+test('Select a table row by cell contents', async t => {
+    const rowData = {
+        id:        '2',
+        firstName: 'Oliver',
+        lastName:  'Black'
+    }
+    const row = Selector('td').withText(rowData.id).parent();
+
+    await t
+        .click(row)
+        .expect(row.child('td').nth(0).innerText).eql(rowData.id)
+        .expect(row.child('td').nth(1).innerText).eql(rowData.firstName)
+        .expect(row.child('td').nth(2).innerText).eql(rowData.lastName)
+        .expect(row.hasClass('highlighted')).ok();
+})
\ No newline at end of file