CODEWITHSUNDEEP
cypress
stackuser
stackuser

Reputation: 219

How to click a svg with title using cypress?

i am new to react and i am trying to click a svg with title cross. below is the dom structure

<div>
    <span data-testid="file">filename</span>
    <button type="button">
        <svg>
            <title>cross</title>
            <path></path>
        </svg>
    </button>
</div>

I am not sure how to do it. could someone help me with this. i want to click svg whose title is cross using cypress. thanks.

Upvotes: 0

Views: 1483

Answers (3)

Abdullah Sohail Yaqoob
Abdullah Sohail Yaqoob

Reputation: 361

Simply try this

const sele='button[type="button"]>svg';
cy.get(sele).click()

Upvotes: 1

user14783414
user14783414

Reputation:

You can use the command cy.contains(selector, content).

Here's my test. To run it install the cypress-fiddle library

/// <reference types="@cypress/fiddle" />

const test = {
  html: `
  <div>
    <span data-testid="file">filename</span>
    <button type="button">
      <svg>
        <title>cross</title>
        <path></path>
      </svg>
    </button>
  </div>
  `,
  test: `
    cy.contains('svg', 'cross').click()
  `
}
it('run test', () => {
  cy.runExample(test)
})

Upvotes: 2

Evgenii Bazhanov
Evgenii Bazhanov

Reputation: 926

You can try:

cy.get('svg title').contains('cross').click()

or cy.contains('cross').click()

Reference link

Upvotes: 3

Related Questions