如何存储图像的 src 并将其与 Cypress 中的另一个图像进行比较？

Question

测试objective是为了确认如果用户上传新图片，上传的图片'src'属性会改变，这意味着图片已经改变。

我尝试使用下面概述的几种方法。

第一种方法

cy.get('.img').then($img => {
      //store the src

      const source = $('img').attr('src');

      /**
       * File drop 2mb jpg
       */
      cy.fixture(Cypress.env("JPG_2MB_ASSET"), "base64").then(fileContent => {
        cy.get(".dropzone").upload(
          {
            fileContent,
            fileName: "sampleimage.jpg",
            mimeType: "image/jpeg"
          },
          { subjectType: "drag-n-drop" }
        );
      });
      cy.wait(16000);

      cy.get('img')
        .attr('src')
        .should($src2 => {
          expect($src2).not.to.eq(source);
        });

第二种方法

      //store the src

      const source = $img.attr('src')

      /**
       * File drop 2mb jpg
       */
      cy.fixture(Cypress.env("JPG_2MB"), "base64").then(fileContent => {
        cy.get(".dropzone").upload(
          {
            fileContent,
            fileName: "sampleimage.jpg",
            mimeType: "image/jpeg"
          },
          { subjectType: "drag-n-drop" }
        );
      });
      cy.wait(16000);

      cy.get("img").attr('src').should(($src2) => {
        expect($src2).not.to.eq(source)

第三种方法

    cy.get("img")
      .attr("src")
      .then($src1 => {
        /**
         * File drop 2mb jpg
         */
        cy.fixture(Cypress.env("JPG_2MB"), "base64").then(fileContent => {
          cy.get(".dropzone").upload(
            {
              fileContent,
              fileName: "sampleimage.jpg",
              mimeType: "image/jpeg"
            },
            { subjectType: "drag-n-drop" }
          );
        });
        cy.wait(16000);

        cy.get('img')
          .attr('src')
          .should($src2 => {
            expect($src2).not.to.eq($src1);
          });

上传效果很好，但是 src 的比较不行。

第一种和第二种方法

预期 - 它将第一张图像的 src 存储为常量 source，并丢弃 2mb 的 jpg。然后将第二张图片的 src 与第一张图片进行比较并确认它们不同。

结果- ReferenceError: $ is not defined

第三种方法

预期-它将第一个 src 存储为 $src1，然后将其与第二个 src $src2

进行比较

结果- cy.get(...).attr is not a function

Answer 1

在对我的键盘大发雷霆之后，我找到了成功的解决方案。

使用 invoke 你可以像 src 一样存储 attr 的值，如下所示： https://docs.cypress.io/api/commands/invoke.html#Arguments-are-automatically-forwarded-to-the-function

因此，在对上述尝试进行一些调整后，我发现它可以完美地工作：

    cy.get('.image-root img').invoke('attr', 'src').then((firstSrc) => {
      const src1 = firstSrc

        /**
         * File drop 2mb jpg
         */
        cy.fixture(Cypress.env("JPG_2MB"), "base64").then(fileContent => {
          cy.get(".dropzone").upload(
            {
              fileContent,
              fileName: "sampleimage.jpg",
              mimeType: "image/jpeg"
            },
            { subjectType: "drag-n-drop" }
          );
        });

        cy.wait(16000);

      cy.get('.image-root img').invoke('attr', 'src').then((nextSrc) => {
        expect(nextSrc).to.not.equal(src1)
      });
    });

如何存储图像的 src 并将其与 Cypress 中的另一个图像进行比较？

How do I store the src of an image and compare it to another image in Cypress?

javascript

e2e-testing

cypress