我正在尝试实现一个自定义方法,以查找元素是否在当前视图端口中
以下是我尝试实现的代码片段,但结果未呈现布尔结果:
export const isElementInViewport = () => {
const getBoundValues = ClientFunction(() => document.querySelectorAll(".hero-getstart").item(0).getBoundingClientRect());
const windowHeight = ClientFunction(() => window.innerHeight);
const windowWidth = ClientFunction(() => window.innerWidth);
return getBoundValues.bottom > 0 && getBoundValues.right > 0 && getBoundValues.left < (windowWidth || document.documentElement.clientWidth) && getBoundValues.top < (windowHeight || document.documentElement.clientHeight);
};
Run Code Online (Sandbox Code Playgroud)
上面的代码在浏览器控制台上可以正常运行,即,当我尝试将getBoundValues
in 存储在变量A中并尝试运行return命令时,它会根据视口中元素的可见性将输出打印为true或false。脚本,它总是给出一个假:
这是触发上述方法的方法:
export const verifyElementInView = () => {
const elementVisible = isElementInViewport();
console.log(elementVisible);
};
Run Code Online (Sandbox Code Playgroud)
输出始终为假。
这是我尝试执行时收到的输出摘要console.log(getBoundValues)
:
{ [Function: __$$clientFunction$$]
with: [Function],
[Symbol(functionBuilder)]:
ClientFunctionBuilder {
callsiteNames:
{ …
Run Code Online (Sandbox Code Playgroud) 使用 testcafe grep 模式将部分解决我们使用标签的问题,但它仍然会在规范报告上显示这些标签......!!!
有没有办法在测试/夹具名称中包含标签并使用 grep 模式,但跳过这些标签以显示在执行报告中?
import { Selector } from 'testcafe';
fixture `Getting Started`
.page `http://devexpress.github.io/testcafe/example`;
test('My first test --tags {smoke, regression}', async t => {
// Test code
});
test('My Second test --tags {smoke}', async t => {
// Test code
});
test('My first test --tags {regression}', async t => {
// Test code
});
testcafe chrome test.js -F "smoke"
Run Code Online (Sandbox Code Playgroud)
上面的代码片段将为我触发仅烟雾测试,但报告将显示测试名称以及这些标签
是否有其他处理标签的方法或不在测试执行报告中显示标签的解决方案?
testing smoke-testing regression-testing e2e-testing testcafe