Question

我正在使用cypress来测试我的VueJS应用程序。我遇到的一件事是模拟要在页面上显示的图像。对于我的用例，我只是使用以下代码加载用户个人资料：

describe('Test Login', () => {
  it('Can Login', () => {
    cy.server();
    cy.route({
      method: 'GET',
      url: '/api/account/',
      response: 'fx:profile.json',
    });
    cy.route('**/media/demo1.png', 'fx:demo1.png');
  });
});

fixtures/profile.json

{
    "avatar": "http://localhost:8080/media/demo1.png",
    "username": "cypress",
    "email": "email@cypress.io",
    "pk": 1,
    "is_staff": true,
    "is_superuser": true,
    "is_active": true
}

在测试中正确加载了轮廓夹具数据。在我的装置文件夹中，我还有一个demo1.png文件。我希望在测试过程中可以加载该图像并将其显示在页面上，但是它显示为损坏的图像。

在网络标签中，它显示demo1.png为残破图像，响应码为200，类型为text/html。

赛普拉斯文档主要在上传图像的上下文中讨论图像，但是我还没有找到如何模拟通过<img>标记加载的图像的示例。有更简单的方法吗？

Answer 1

我不确定此答案是否可以帮助您。但这至少是解决此问题的方法；-）

假设我们有这样的HTML：

<html>
    <body>
        <button id="button">load</button>
        <div id="profile">

        </div>

        <script>
            function httpGetAsync(theUrl, callback)
            {
                var xmlHttp = new XMLHttpRequest();
                xmlHttp.onreadystatechange = function() { 
                    if (xmlHttp.readyState == 4 && xmlHttp.status == 200)
                        callback(JSON.parse(xmlHttp.responseText));
                }
                xmlHttp.open("GET", theUrl, true); // true for asynchronous 
                xmlHttp.send(null);
            }

            document.getElementById("button").addEventListener("click", () => {

                httpGetAsync("/api/account/", (result) => {
                    var div = document.querySelector("#profile");
                    var img = document.createElement("img");
                    img.src = result.avatar;
                    div.appendChild(img)
                })
            })

        </script>
    </body>
</html>

来源：HTTP GET request in JavaScript?

点击完成后，您想加载配置文件。然后，您可以使用MutationObserver替换img.src。

首先，编写MutationObserver：

var observeDOM = (function(){
    var MutationObserver = window.MutationObserver || window.WebKitMutationObserver;

    return function( obj, callback ){
      if( !obj || !obj.nodeType === 1 ) return; // validation

      if( MutationObserver ){
        // define a new observer
        var obs = new MutationObserver(function(mutations, observer){
            callback(mutations);
        })
        // have the observer observe foo for changes in children
        obs.observe( obj, { childList:true, subtree:true });
      }

      else if( window.addEventListener ){
        obj.addEventListener('DOMNodeInserted', callback, false);
        obj.addEventListener('DOMNodeRemoved', callback, false);
      }
    }
  })();

（从Detect changes in the DOM复制并粘贴）

现在您可以执行以下操作：

describe('Test Login', () => {
    it('Can Login', () => {
        var win = null;
      cy.server();
      cy.route({
        method: 'GET',
        url: '/api/account/',
        response: 'fx:profile.json'
      });
      cy.visit("index.html").then(w => { 
          cy.get("#profile").then(pro => {
              var e = pro[0];
              observeDOM(e, (m) => {
                // add a red dot image
                m[0].addedNodes[0].src = "data:image/png;base64,"+
                "iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAABGdBTUEAALGP"+
                "C/xhBQAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9YGARc5KB0XV+IA"+
                "AAAddEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIFRoZSBHSU1Q72QlbgAAAF1J"+
                "REFUGNO9zL0NglAAxPEfdLTs4BZM4DIO4C7OwQg2JoQ9LE1exdlYvBBeZ7jq"+
                "ch9//q1uH4TLzw4d6+ErXMMcXuHWxId3KOETnnXXV6MJpcq2MLaI97CER3N0"+
                "vr4MkhoXe0rZigAAAABJRU5ErkJggg=="
            })
          })
          cy.get("button").click()
      })
    });
  });

（是的，至少有几行代码是我自己编写的；-P）

您可以从fixtures文件夹的img.src属性中读取图像。为了简单起见，我在这里使用了一个静态的base64字符串。

结果：

我们没有在aurelia应用程序中使用这种东西，但是前一段时间我在一个私有项目中尝试了类似的事情。

如何在赛普拉斯的夹具中模拟图像

1 个答案: