Как мне сохранить источник изображения и сравнить его с другим изображением в Cypress? - PullRequest
Новая
       2

Как мне сохранить источник изображения и сравнить его с другим изображением в Cypress?

2 голосов
/ 07 июня 2019

Цель теста - подтвердить, что атрибут загруженного изображения «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, и он сбрасывает 2 Мб jpg. Затем он сравнивает src 2-го изображения с первым и подтверждает, что они разные.

Результат- ReferenceError: $ is not defined

Третий подход

Ожидаемый - он сохраняет первый источник как $src1, а затем сравнивает его со вторым источником $src2

Результат- cy.get(...).attr is not a function

1 Ответ

2 голосов
/ 12 июня 2019

После обильной злости на клавиатуру я нашел решение для победы.

Используя invoke, вы можете сохранить значение attr, например src, как показано здесь: 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)
      });
    });
...