Cypress，读出图像的属性<img>喜欢标题或 alt 并进行比较

Question

I want to read out <img properties and compare it.

HTML-SNIPET:

<span class="mat-button-wrapper">
    <img alt="Paul 00_AA_Projektleiter" src="assets/img/KapazuiBonsai_40_32.png" title="Paul 00_AA_Projektleiter" aria-label="project.AddedProjectLeader: QCBt4HwB0UC4Ud30Kp_T">
    <span>00_AA_Projektleiter</span>
</span>

Cypress-Code (works):

cy.get(`[aria-label="project.AddedProjectLeader: `+globalProjectId+`"]`)
.get(`span`)
.contains('00_AA_Projektleiter')

cy.get(`[aria-label="project.AddedProjectLeader: `+globalProjectId+`"]`)
.get(`span`)
.should('contain', '00_AA_Projektleiter' )

Cypress-Code (NOT working):

cy.get(`[aria-label="project.AddedProjectLeader: `+globalProjectId+`"]`)
.get(`img[title]`)
.contains('Paul 00_AA_Projektleiter')

cy.get(`[aria-label="project.AddedProjectLeader: `+globalProjectId+`"]`)
.get(`title`)
.contains('Paul 00_AA_Projektleiter')

I also tried .its('title') and .wrap() in diffrent combinations, but nothing worked.

SO how can I get properties like alt="..." or title="..." inside the <img-TAG? Cause I think contain.text only gets innerHTMLText between <span But whats about values INSIDE TAGs? Later I have a <div WITHOUT <span so I NEED to read out alt="..."

HTML-SNIPET:

<div data-cy="project.AddedEmployee" aria-label="project.AddedEmployeeDiv: -SDE4HwB0UC4Ud30TJ9K">
    <div>
        <img class="mat-tooltip-trigger" alt="Bernd 00_BB_Testmitarbeiter" src="assets/img/KapazuiBonsai_40_32.png" aria-label="project.AddedEmployeeImg: -SDE4HwB0UC4Ud30TJ9K" aria-describedby="cdk-describedby-message-4" cdk-describedby-host="">
        <!---->
    </div>
</div>

Answer 1

You can do like these:

cy.get('mat-button-wrapper').find('span').should('have.text', '00_AA_Projektleiter')

OR, If you want to first find the image attribute and then assert the text you can do something like:

cy.get(`[aria-label="project.AddedProjectLeader: ${globalProjectId}"]`)
  .parent('span')
  .should('contain.text', '00_AA_Projektleiter')

Or, If you want to validate alt or title attributes you can do something like this:

cy.get(`img[aria-label="project.AddedProjectLeader: ${globalProjectId}"]`)
.should('have.attr', 'alt', 'Paul 00_AA_Projektleiter')

cy.get(`img[aria-label="project.AddedProjectLeader: ${globalProjectId}"]`)
.should('have.attr', 'title', 'Paul 00_AA_Projektleiter')