Last active
August 8, 2022 00:36
-
-
Save dapperdandev/7760124a98847389dbf72d2eb85eb5de to your computer and use it in GitHub Desktop.
TestCafe: Finding Cells In a Table
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!-- served up with `live-server --port=5000` --> | |
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <meta http-equiv="X-UA-Compatible" content="ie=edge"> | |
| <title>Document</title> | |
| </head> | |
| <body> | |
| <table> | |
| <thead> | |
| <tr> | |
| <th>Id</th> | |
| <th>First Column Header</th> | |
| <th>Second Column Header</th> | |
| </tr> | |
| </thead> | |
| <tbody> | |
| <tr> | |
| <td>1</td> | |
| <td>Red</td> | |
| <td>Red</td> | |
| </tr> | |
| <tr> | |
| <td>2</td> | |
| <td>Yellow</td> | |
| <td>Yellow</td> | |
| </tr> | |
| <tr> | |
| <td>3</td> | |
| <td>Green</td> | |
| <td>Green</td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import { Selector } from 'testcafe'; | |
| import { TableIterator } from './tableIterator'; | |
| class SomeTablePage { | |
| findRow(id: string): Selector { | |
| try { | |
| return Selector('td').withExactText(id).parent('tr') | |
| } catch (err) { | |
| console.log(err) | |
| } | |
| } | |
| async getRowCells(tableRow: Selector) { | |
| try { | |
| const firstColumn = await tableRow.find('td').nth(await TableIterator.getHeaderIndex('First Column Header')).innerText; | |
| const secondColumn = await tableRow.find('td').nth(await TableIterator.getHeaderIndex('Second Column Header')).innerText; | |
| return { | |
| firstColumn: firstColumn, | |
| secondColumn: secondColumn | |
| }; | |
| } catch (err) { | |
| console.log(err) | |
| } | |
| } | |
| } | |
| export const someTablePage = new SomeTablePage(); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import { | |
| someTablePage | |
| } from './someTable.page'; | |
| fixture(`SOME TABLE`) | |
| test('Find Third Row', async t => { | |
| await t.navigateTo('http://127.0.0.1:5000'); | |
| const data = { | |
| id: "3", | |
| firstColumn: "Green", | |
| secondColumn: "Green" | |
| }; | |
| let tableRow = someTablePage.findRow(data.id); | |
| let tableCells = await someTablePage.getRowCells(tableRow); | |
| await t | |
| .expect(tableCells.firstColumn).eql(data.firstColumn) | |
| .expect(tableCells.secondColumn).eql(data.secondColumn) | |
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import { Selector } from 'testcafe'; | |
| export class TableIterator { | |
| static async getHeaderIndex(headerText: any): Promise<number> { | |
| interface CustomSelector extends Selector { | |
| getIndex: Promise<number> | |
| } | |
| const headerElement = <CustomSelector>Selector('th').withText(headerText).addCustomDOMProperties({ | |
| getIndex: el => { | |
| const nodes = Array.prototype.slice.call(el.parentElement.children); | |
| return nodes.indexOf(el) | |
| } | |
| }) | |
| return await headerElement.getIndex | |
| } | |
| } |
I have two rows within a table, one as "SC 11" and another as "SC 1". It appears the iterator always returns "SC 11" and does not return "SC 1".
I completely forgot this gist was public. Anyway, this was written before TestCafe added a withExactText option. Just shooting off the cuff here, but I imagine that's the problem.
Try changing: return Selector('td').withText(id).parent('tr') to return Selector('td').withExactText(id).parent('tr') and see what happens
I didn't think of that. It works beautifully.
Glad to hear!
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
I have two rows within a table, one as "SC 11" and another as "SC 1". It appears the iterator always returns "SC 11" and does not return "SC 1".