Skip to content

nguyenngoclongdev/cypress-table

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

15 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

CI GitHub license

npm version Gitpod Ready-to-Code install size npm bundle size npm downloads

cypress-table

Adds getTable command to cypress test runner.

Requirements

  • Cypress version 8.0.0 or above

Install

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'

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:

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.

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:

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

3. Validate if table has the exact data ignoring order

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)

4. Validate if table has a subset of expected rows

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

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

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.

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

  • 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

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.

About

Cypress plugin to help assert grids and tables

Topics

Resources

Stars

Watchers

Forks

Packages

No packages published

Languages

  • JavaScript 76.9%
  • HTML 23.1%