个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
25
4
我正在使用 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> 加载的图像的示例。标签。有没有更简单的方法来做到这一点？
最佳答案
我不确定这个答案是否可以帮助你。但至少它是解决这个问题的方法;-)
假设我们有一个这样的 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>
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);
}
}
})();
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()
})
});
});
关于vue.js - 如何使用柏树中的夹具模拟图像，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54481634/
25
4
0
我正在尝试使用 Cypress 检查列表是否包含 2 个特定条目。 我试过: cy.get('ul.messages_list') .children()
我正在使用 Cypress 的 zip 文件下载，因为运行它的服务器无法访问 npm。 我已将以下内容添加到 package.json 的脚本部分 "cy:cypress": "D:/Cypr
我正在使用 Cypress 的 zip 文件下载，因为运行它的服务器无法访问 npm。 我已将以下内容添加到 package.json 的脚本部分 "cy:cypress": "D:/Cypr
在有头模式下测试通过，但在 headless (headless)模式下总是失败 我正在尝试对“列表”类型的 w2ui 字段执行测试 理想情况下，当我们单击此 w2ui 列表元素时，会生成一个带有选择
我是一名优秀的程序员,十分优秀！