cypress-get-table

Adds getTable command to cypress test runner.

Install

npm install --save cypress-get-table

Then include in your project's cypress/support/index.js

require('cypress-get-table')

Usage

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()

Return of getTable

Suppose you have this table in your webpage:

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.

Examples

1. Validate empty table

Given table: | City | Country | |---------------- |----------- | | | |

Code:

cy.get('table').getTable().should(tableData => {
    expect(tableData).to.be.empty
})

2. Validate if table has the exact data in exact order as expected

Given table:

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)
})

3. Validate if table has the exact data ignoring order

Given table:

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)

4. Validate if table has a subset of expected rows

Given table:

Code:

const expected = [
    {
        "Country": "USA",
        "City": "Los Angeles"
    }
]
cy.get('table').getTable().should(tableData => {
    expected.forEach(item => expect(tableData).to.deep.include(item))
})

5. Validate if table has a subset of expected rows ommiting some columns

Given table:

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.

Limitations

• This library only works if your table uses the correct tags, which is thead/th For table head and table header, and tr/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

Roadmap

• <input disabled="" type="checkbox"> Implement Continuous Integration with Circle CI
• <input disabled="" type="checkbox"> Implement a way to handle pagination and infinite scrolling
• <input disabled="" type="checkbox"> 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
• <input disabled="" type="checkbox"> Improve logs of assertion errors

Issues

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.