我正在使用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>
标记加载的图像的示例。有更简单的方法吗?
<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应用程序中使用这种东西,但前一段时间我在一个私有项目中尝试了类似的事情。