英文:
Is there a way I can extract data from the node using Cypress?
问题
I'm trying to find a way I can extract this information in to my test or print it out somewhere. In its current format it just says you have 3 accessibility issues. It's not very descriptive, so I want to extract the below image somehow as you can see in the nodes it gives me the exact element to fix. So how would one extract that information to make it a more useful test. I've had a look at the cypress documentation and I've not seen anything that might be useful so is it possible?
我正在尝试找到一种方法，可以将这些信息提取到我的测试中，或者在某个地方打印出来。在其当前格式中，它只是说你有3个辅助功能问题。这并不是很详细，所以我想以某种方式提取下面的图像，正如你可以在节点中看到的，它给我提供了要修复的确切元素。那么，如何提取这些信息，以使测试更有用呢？我已经查看了cypress文档，但没有看到任何可能有用的东西，所以是否可能？
英文:
I'm trying to find a way I can extract this information in to my test or print it out somewhere. In it's current format it just says you have 3 accessibility issues. It's not very descriptive, so I want to extract the below image somehow as you can see in the nodes it gives me the exact element to fix. So how would one extract that information to make it a more useful test. I've had a look at the cypress documentation and I've not seen anything that might be useful so is it possible?
describe('Womens T20 Cricket Test',() => {
it('Should log any accssibility failures critical impact on a competition page',() => {
cy.visit('https://www.skysports.com/cricket/ICC-Womens-World-T20');
cy.iframe('#sp_message_iframe_758392').find('.sp_message-accept-button').should('be.visible').click()
cy.injectAxe();
cy.checkA11y(null, { includedImpacts: ['critical', 'serious', 'moderate']})
});
});
答案1
得分: 3
你想要做的有点困难，因为突出显示是手动选择日志条目的结果。您可以尝试使用 screenshot 命令，但我认为它可能会丢失一些细节。
也许一个更好的方法是阻止 cy.checkA11y() 失败测试，如下所示
// 在规范文件的顶部定义或只需导入它
function terminalLog(violations) {
cy.task(
'log',
`${violations.length} 个可访问性违规${
violations.length === 1 ? '' : 's'
} ${violations.length === 1 ? '被' : '被'} 检测到`
)
// 挑选特定的键以保持表格可读性
const violationData = violations.map(
({ id, impact, description, nodes }) => ({
id,
impact,
description,
nodes: nodes.length
})
)
cy.task('table', violationData)
}
// 然后在您的测试中...
it('将违规记录到终端', () => {
cy.checkA11y(null, null, terminalLog)
})
任务定义如下
const { defineConfig } = require('cypress')
module.exports = defineConfig({
e2e: {
setupNodeEvents(on, config) {
on('task', {
log(message) {
console.log(message)
return null
},
table(message) {
console.table(message)
return null
}
})
},
},
})
这是参考代码 使用 violationCallback 参数。请注意，给定的任务设置已过时，您应该遵循我的示例。
结果
英文:
What you want to do is a bit difficult, since the highlights are the result of manually selecting the log entry. You could try the screenshot command but I think it would miss some details.
Maybe a better approach is to stop cy.checkA11y() failing the test, like so
// Define at the top of the spec file or just import it
function terminalLog(violations) {
cy.task(
'log',
`${violations.length} accessibility violation${
violations.length === 1 ? '' : 's'
} ${violations.length === 1 ? 'was' : 'were'} detected`
)
// pluck specific keys to keep the table readable
const violationData = violations.map(
({ id, impact, description, nodes }) => ({
id,
impact,
description,
nodes: nodes.length
})
)
cy.task('table', violationData)
}
// Then in your test...
it('Logs violations to the terminal', () => {
cy.checkA11y(null, null, terminalLog)
})
and the task definition is
const { defineConfig } = require('cypress')
module.exports = defineConfig({
e2e: {
setupNodeEvents(on, config) {
on('task', {
log(message) {
console.log(message)
return null
},
table(message) {
console.table(message)
return null
}
})
},
},
})
This is the reference code Using the violationCallback argument. Note the task setup given is out of date, you should follow my example.
Results
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论