Adds getTable
command to cypress
test runner.
- Cypress version 8.0.0 or above
Install using npm:
npm install --save-dev cypress-table
or yarn
yarn add --dev cypress-table
Before Cypress is loaded (usually in your commands.js
) put the following line:
require('cypress-table')
Or, if you are using ES module syntax:
import 'cypress-table'
Ater installation, cy
object will have getTable
command.
The command can ONLY be called chained after a subject.
Incorrect usage:
cy.getTable('table#table1')
Correct usage:
cy.get('table#table1').getTable()
Suppose you have this table in your webpage:
City | Country |
---|---|
Rio de Janeiro | Brazil |
Los Angeles | USA |
Buenos Aires | Argentina |
cy.get("table").getTable()
will return the following list of objects:
[{
"City": "Rio de Janeiro",
"Country": "Brazil"
}, {
"City": "Los Angeles",
"Country": "USA"
}, {
"City": "Buenos Aires",
"Country": "Argentina"
}]
If table is empty (with only headers), getTable() will return an empty list.
Given table:
City | Country |
---|---|
Code:
cy.get('table').getTable().should(tableData => {
expect(tableData).to.be.empty
})
Given table:
City | Country |
---|---|
Rio de Janeiro | Brazil |
Los Angeles | USA |
Code:
const expected = [
{
"City": "Rio de Janeiro",
"Country": "Brazil"
}, {
"Country": "USA",
"City": "Los Angeles"
}
]
cy.get('table').getTable().should(tableData => {
expect(tableData).to.deep.equal(expected)
})
Given table:
City | Country |
---|---|
Rio de Janeiro | Brazil |
Los Angeles | USA |
Code:
const expected = [
{
"Country": "USA",
"City": "Los Angeles"
}, {
"City": "Rio de Janeiro",
"Country": "Brazil"
}
]
cy.get('table').getTable().should(tableData => {
expect(tableData).to.deep.equalInAnyOrder(expected)
})
FYI: For this case, deep-equal-in-any-order
chai plugin is needed, so you have to add this code in support/index.js
file:
import deepEqualInAnyOrder from "deep-equal-in-any-order"
chai.use(deepEqualInAnyOrder)
Given table:
City | Country |
---|---|
Rio de Janeiro | Brazil |
Los Angeles | USA |
Code:
const expected = [
{
"Country": "USA",
"City": "Los Angeles"
}
]
cy.get('table').getTable().should(tableData => {
expected.forEach(item => expect(tableData).to.deep.include(item))
})
Given table:
City | State | Country |
---|---|---|
Rio de Janeiro | Rio de Janeiro | Brazil |
Los Angeles | California | USA |
Code:
const losAngeles = {
"City": "Los Angeles",
"Country": "USA"
}
cy.get('table').getTable({ onlyColumns: Object.keys(losAngeles) }).should(tableData => {
expect(tableData).to.deep.include(losAngeles)
})
As you can see for this case is necessary to pass key 'onlyColumns'
which is a list of string of all columns needed.
- If you need more examples, go to
cypress/integration/spec.js
and let the tets speak for itself.
-
This library only works if your table uses the correct tags, which is
thead/th
For table head and table header, andtr/td
for table row and table data. -
Does not handle pagination neither infinite scrolling
-
Table needs to have a table header
-
Does not handle colspan neither rowspan
- Implement Continuous Integration with Circle CI
- Implement a way to handle pagination and infinite scrolling
- Implement a way to handle tables that are not structures as default html tags, several front end frameworks generate pleasant grids that are a bunch of divs
- Improve logs of assertion errors
Please do not hesitate to open bugs, issues and enhancements, and feel free to add more features and make this library more useful for others and make a pull request.