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

问题描述 投票:4回答:1

我正在使用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 protected]",
    "pk": 1,
    "is_staff": true,
    "is_superuser": true,
    "is_active": true
}

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

在网络选项卡中,它显示为demo1.png,是带有200响应代码和text/html类型的损坏图像。

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

vue.js e2e-testing cypress
1个回答
0
投票
说我们有这样的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字符串。

结果:enter image description here

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

© www.soinside.com 2019 - 2024. All rights reserved.