检查其中一个 div 是否包含我在守夜人中的值

问题描述

我在使用 nightwatch.js 测试我的 web 应用时遇到问题.我需要遍历页面上的所有 div 元素，以检查是否存在包含我之前添加的所有子元素的元素.例如我有:

I have problem with testing my webapp with nightwatch.js. I need to iterate over all div elements on the page to check if there is the one who contains all child elements I added before. For example I have:

<div className = 'myclass'>
    <h2> text1 </h2>
    <h3> second_text1 </h3>
</div>
<div className = 'myclass'>
    <h2> text2 </h2>
    <h3> second_text2 </h3>
</div>

我想检查其中一个 div 是否同时包含:text2"和second_text2".我尝试像这里添加 iter 函数:断言文本值使用 nightwatch.js 的 webelements 列表，但我不知道如何检查此 div 中的子元素，并且仅在没有 div 包含我的值时才断言.

And I want to check if one of divs contains both: 'text2' and 'second_text2'. I tried to add iter function like here: Assert text value of list of webelements using nightwatch.js but I don't know how to check child elements in this div and assert only if none of divs contains my values.

推荐答案

不幸的是，nightwatch 不能很好地支持 promise 或一般异步.博文这里总结了一些痛点.

Unfortunately, nightwatch does not support promises or general asyncness very well. The blog post here summarises some of the pain points.

幸运的是，可以结合使用 browser.elements 和 browser.perform.

Fortunately, it is possible using a combination of browser.elements and browser.perform.

var assert = require('assert');

module.exports = {
    'foobar': function (browser) {
        var isTextFound = false;
        browser
            .url('http://localhost:3000')
            .waitForElementVisible('body', 1000);

        browser.elements('css selector', '.myclass', function (res) {
            res.value.forEach(function (jsonWebElement) {
                var jsonWebElementId = jsonWebElement.ELEMENT;
                browser.elementIdText(jsonWebElementId, function (jsonElement) {
                    var text = jsonElement.value;
                    if (text.indexOf('text1') !== -1 && text.indexOf('second_text') !== -1) {
                        isTextFound = true;
                    }
                });
            });
        });
        browser.perform(function () {
            assert.ok(isTextFound, 'Text found');
        });


        browser.end();
    }
}

让我们来看看一些关键点

Let's go through some of the key points

require('assert')

这是必需的，因为 nightwatch 断言仅对 DOM 元素进行操作，因此您不能断言布尔值.这也意味着断言不会出现在报告中，但是如果它是假的，它会抛出一个错误并且会出现.

This is required because nightwatch asserts only operate on DOM elements and hence you can not assert a boolean. This also means that the assertion will not show up on the report, however if it is false, it will throw an error and this will come up.

browser.perform(function(){...})

这会将断言放到命令队列中，以便随后发生断言.如果这不存在，则评估将立即进行并且断言将失败.

This puts the assertion onto the command queue so that the assertion will happen afterwards. If this was not there, the evaluation will happen immediately and the assert will fail.

browser.elements('css selector, '.myclass', function(res){...})

这是使用 elements api.请注意，webdriver 协议部分下的 api 不直接返回 web 元素，而是返回 web 元素的 Selenium 表示(WebElement JSON 对象)，因此我们必须使用特殊方法，例如 elementIdText 来获取信息离开他们.

This is using the elements api. Please note that the api under the webdriver protocol section do not return web elements directly but return the Selenium representation of web elements (WebElement JSON objects) and hence we have to use special methods such as elementIdText to get information out of them.

这篇关于检查其中一个 div 是否包含我在守夜人中的值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持html5模板网！