CODEWITHSUNDEEP
typescriptcypresscypress-each
Pulkit Agrawal
Pulkit Agrawal

Reputation: 529

Cypress+TS, how to get second text that wrapped double quotes?

I got this web page to test claim number. But I am not able to extract the same.

<h1 class="jss41 undefined" style="text-transform: capitalize; display: flex; align-items: center; margin-bottom: 0.5rem;">
"Claims #"
"75078"
</h1>

The xpath I am trying to get is

export const getClaimsHeader = () => cy.xpath("//h1[contains(@class,'undefined')]")

This is the code I am trying to get the claim Number

  getClaimsHeader()
  .each((header) => {
    claimNum = header.text().split('#');
    actualClaimNumber = claimNum[1];
    
  })
  .then(() => {
    expect(claimNumber).to.equal(actualClaimNumber);
  });

But actualClaimNumber is displayed as blank because header.text() is returning only "Claims #"

Upvotes: 2

Views: 400

Answers (2)

Fody
Fody

Reputation: 32118

You may have textNodes inside the <h1> although it's not apparent from the HTML.

If so, here is a function to try out which should return all the textNodes in an array:

function getTextNodes($el) {
  const childNodes = $el[0].childNodes
  const textNodes = [...childNodes].filter(child => child.nodeType === Node.TEXT_NODE)
  const texts = textNodes.map(textNode => textNode.nodeValue.trim())
  return texts
}

Use it like this

getClaimsHeader().each((header) => {
  const texts = getTextNodes(header);
  console.log(texts)              // check which part of the array is the number
  const claim = texts[1]          // for example
})

Since you're using .each() I presume there are multiple headers?

If so, your .then() does not receive each claim number, only the last one.

Upvotes: 1

TesterDick
TesterDick

Reputation: 10560

It looks like you nearly have it, but you would need to remove the double-quotes as well since they are part of the text.

Also add trim() to remove any linefeed that may be there.

Lastly, in your sample code expect(claimNumber).to.equal(actualClaimNumber) will never pass because actualClaimNumber is calculated from claimNumber

const actualClaimNumbers = ['75078', ...];

getClaimsHeader()
  .each((header, index) => {
    const claimNumber = header.text().split('#')[1].replace(/"/g, '').trim()

    console.log('header text', claimNumber);

    expect(claimNumber).to.equal(actualClaimNumbers[index])
  })

Upvotes: 0

Related Questions