How to check if an element has 'any' value Cypress?

Question

I am writing some basic cypress tests and I just want to make sure that a table we have has all of the correct columns and that any data is rendering.

I know .contains() checks the element selection AND allows text matching, but there could be all sorts of data in this table, I just want to make sure something renders from the backend.

Any idea how to check if there is any (non-specific) value?

Cheers!

describe('Data Source Table renders properly', () => {
  beforeEach(() => {
    cy.viewport(1920, 1080)
    cy.visit('http://localhost:3000/source')
    // Assert we are on the correct page /source
    cy.url().should('include', '/source')
  })
  it('Data Source header exists', () => {
    cy.contains('Data Source')
  })
  it('Data Source table exists, column headers are correct and there is data', () => {
    cy.get('table').should('exist')
    cy.wait(2000)
    cy.get('table').contains('th', 'Ip')
    cy.get('table').contains('th', 'Station')
    cy.get('table').contains('th', 'Table')
    cy.get('table').contains('th', 'Status')
  })
})

jjhelguero · Accepted Answer · 2022-04-15T17:29:16.430

1

You are right, .contains() allows text matching. It also allows regex matching which you can apply for your situation.

// this will check all td's will have any text
// here is regex example regexr.com/6jmi6
cy.contains('td', /\w/g).should('be.visible')

edited Apr 15 '22 at 17:29

answered Apr 15 '22 at 17:13

jjhelguero

2,281
5
13

Awesome! I don't have too much experience using regex just yet so it never pops into my head. Thanks again man! Also, for the future, anyone using this answer, td needs to have the closing ' ('td') – LovelyAndy Apr 15 '22 at 17:17
1

Good catch. Updated now. – jjhelguero Apr 15 '22 at 17:29

score 0 · Answer 2 · answered Apr 16 '22 at 07:04

0

This is more concise, IMO less prone to error

cy.get('table thead th')
  .each($th => {
    expect($th.text()).not.to.be.empty
  })

You can remove cy.get('table').should('exist') and cy.wait(2000)

answered Apr 16 '22 at 07:04

Visal

537
1
6

Thanks for the comment! I haven't seen any of that syntax before, interesting. I use `cy.wait(2000)` to give the backend time to render the data in the chart. – LovelyAndy Apr 16 '22 at 17:10

How to check if an element has 'any' value Cypress?

2 Answers2