1

What i want to do is compare that the text in class "ellipsis-2-lines text-lg text-weight-semibold" is the same as h1 on next open page

this test throws an error: expected <h1.text-h4.text-weight-semibold.q-mb-sm> to contain @selectedText

I think there is an error when using invoke function. it might not even be possible to use it that way. How to fix this error?

describe('template spec', () => {
  it('visit gxpbox', () => {
    cy.visit('https://gxpbox.org/')
    cy.get("input[placeholder=\"Where are you going?\"]").type("Dubai")
    cy.get('[class="q-item q-item-type row no-wrap q-item--clickable q-link cursor-pointer q-focusable q-hoverable items-center"]').contains('Dubai, United Arab Emirates').click()
    cy.get("button[type=\"submit\"]").click();
    cy.get('[class="ellipsis-2-lines text-lg text-weight-semibold"]')
      .should('have.length.gt', 19)
      .its('length')
      .then((n) => Cypress._.random(0, n - 1))
      .then((k) => {
        cy.log(`picked random index ${k}`)
        cy.get('[class="ellipsis-2-lines text-lg text-weight-semibold"]').eq(k).click().invoke('text').as('selectedText');
      })
    cy.get('h1').should("contain", "@selectedText")
  })
})
Rachel.Zawadi
  • 51
  • 4
Julia
  • 23
  • 3
  • `.eq(k).click().invoke` - why do you need a click() there? That won't work. – art Feb 08 '23 at 10:04
  • @art no, it works correctly. only the line cy.get('h1').should("contain", "@selectedText") does not work – Julia Feb 08 '23 at 10:12

2 Answers2

4

You can use that syntax with plugin bahmutov/cypress-aliases.

This conveniently modifies the .should() command to accept an alias as a second parameter.

import 'cypress-aliases/commands/should'

it('visit gxpbox', () => {
  cy.visit('https://gxpbox.org/')
  ...
  cy.get('[class="ellipsis-2-lines text-lg text-weight-semibold"]')
  .should('have.length.gt', 19)
  .its('length')
  .then((n) => Cypress._.random(0, n - 1))
  .then((k) => {
    cy.log(`picked random index ${k}`)
    cy.get('[class="ellipsis-2-lines text-lg text-weight-semibold"]')
      .eq(k).click().invoke('text').as('selectedText');
  })
  cy.get('h1').should("contain", "@selectedText")

otherwise you have to add another nesting level

import 'cypress-aliases/commands/should'

it('visit gxpbox', () => {
  cy.visit('https://gxpbox.org/')
  ...
  cy.get('[class="ellipsis-2-lines text-lg text-weight-semibold"]')
  .should('have.length.gt', 19)
  .its('length')
  .then((n) => Cypress._.random(0, n - 1))
  .then((k) => {
    cy.log(`picked random index ${k}`)
    cy.get('[class="ellipsis-2-lines text-lg text-weight-semibold"]')
      .eq(k).click().invoke('text')
      .then(title => {
        cy.get('h1').should("contain", title)
      });
  })
Moustapha
  • 143
  • 6
1

The issue is that when using .should('contains', '@selectedText'), the second parameter is being interpreted as a string and not the aliased value. Instead, we can use the alias to compare it to the string value of the h1 element.

cy.get('h1').invoke('text').then((text) => { // get the text of the h1
  cy.get('@selectedText').should('contain', text);
});
agoff
  • 5,818
  • 1
  • 7
  • 20