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 `` 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 @@ + + + + + + Select table rows + + + + + + + + + + + + + + + + + + + + + + + + +
IdFirst NameLast Name
1JohnSmith
2OliverBlack
3HarryRed
+ + + + \ 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