Skip to main content

Broken Image | Cypress | Test & QA

  • Broken Image | Cypress | Test & QA

Código usado​

let img: HTMLImageElement;

describe("Broken images with Demo QA", () => {
  beforeEach(() => {
    cy.visit(`${Cypress.env("demoQA")}/broken`);
  });
  it("Not Broken Image Assertion", () => {
    cy.get('div > img[src="/images/Toolsqa.jpg"]')
      .should("be.visible")
      .and(($img) => {
        img = $img[0] as unknown as HTMLImageElement;
        expect(img.naturalWidth).to.be.greaterThan(0);
      });
  });
  it("Broken Image Assertion", () => {
    cy.get('div > img[src="/images/Toolsqa_1.jpg"]')
      .should("be.visible")
      .and(($img) => {
        img = $img[0] as unknown as HTMLImageElement;
        expect(img.naturalWidth).to.be.greaterThan(0);
      });
  });
});

describe.only("Broken image - Backup demo", () => {
  beforeEach(() => {
    cy.visit(`${Cypress.env("theInternet")}/broken_images`);
  });

  it("Broken Image Detected(first)", () => {
    cy.get("div.example img")
      .first()
      .should("be.visible")
      .and(($img) => {
        //Skip the TS Error, it is working.
        img = $img[0] as unknown as HTMLImageElement | null;
        expect(img.naturalWidth).to.be.greaterThan(0);
      });
  });

  it("Broken Image Detected(last)", () => {
    cy.get("div.example img")
      .last()
      .should("be.visible")
      .and(($img) => {
        //Skip the TS Error, it is working.
        img = $img[0] as unknown as HTMLImageElement | null;
        expect(img.naturalWidth).to.be.greaterThan(0);
      });
  });
});

Documentação Cypress – Verificação de Imagens Quebradas

Este documento explica exclusivamente o código apresentado, detalhando como os testes identificam imagens válidas e imagens quebradas usando Cypress.

Variável Global de Imagem​

let img: HTMLImageElement;

Explicação:​

  • Declara uma variável para armazenar a referência da imagem do DOM
  • Permite acessar propriedades nativas do HTML, como naturalWidth

1. Validação de Imagens no Demo QA​

describe("Broken images with Demo QA", () => {
  beforeEach(() => {
    cy.visit(`${Cypress.env("demoQA")}/broken`);
  });

Explicação:​

  • Agrupa testes relacionados a imagens quebradas
  • Antes de cada teste, acessa a página /broken

Teste – Imagem Não Quebrada​

it("Not Broken Image Assertion", () => {
  cy.get('div > img[src="/images/Toolsqa.jpg"]')
    .should("be.visible")
    .and(($img) => {
      img = $img[0] as unknown as HTMLImageElement;
      expect(img.naturalWidth).to.be.greaterThan(0);
    });
});

Explicação:​

  • Seleciona a imagem pelo src
  • Valida que a imagem está visível na tela
  • Converte o elemento jQuery para HTMLImageElement
  • naturalWidth > 0 indica que a imagem foi carregada corretamente

Teste – Imagem Quebrada​

it("Broken Image Assertion", () => {
  cy.get('div > img[src="/images/Toolsqa_1.jpg"]')
    .should("be.visible")
    .and(($img) => {
      img = $img[0] as unknown as HTMLImageElement;
      expect(img.naturalWidth).to.be.greaterThan(0);
    });
});

Explicação:​

  • Executa a mesma validação da imagem válida
  • Caso a imagem esteja quebrada, naturalWidth será 0
  • O teste falha automaticamente ao não atender a condição

2. Verificação de Imagens Quebradas – The Internet (Backup Demo)​

describe.only("Broken image - Backup demo", () => {
  beforeEach(() => {
    cy.visit(`${Cypress.env("theInternet")}/broken_images`);
  });

Explicação:​

  • describe.only executa apenas este bloco de testes
  • A página contém múltiplas imagens, algumas quebradas

Teste – Primeira Imagem​

it("Broken Image Detected(first)", () => {
  cy.get("div.example img")
    .first()
    .should("be.visible")
    .and(($img) => {
      img = $img[0] as unknown as HTMLImageElement | null;
      expect(img.naturalWidth).to.be.greaterThan(0);
    });
});

Explicação:​

  • Seleciona todas as imagens do container
  • Usa .first() para pegar a primeira
  • Valida se a imagem foi carregada corretamente
  • Comentário indica que o cast ignora erro de TypeScript

Teste – Última Imagem​

it("Broken Image Detected(last)", () => {
  cy.get("div.example img")
    .last()
    .should("be.visible")
    .and(($img) => {
      img = $img[0] as unknown as HTMLImageElement | null;
      expect(img.naturalWidth).to.be.greaterThan(0);
    });
});

Explicação:​

  • Usa .last() para validar a última imagem da lista
  • Repete a mesma lógica de verificação