发现元素可见后无法使用递归定位元素

2022-01-14 00:00:00 递归 automated-tests javascript nightwatch.js

我的问题:

我正在尝试使用页面对象中的部分单击 Nightwatch 下拉列表中的选项.我不确定这是否是部分声明的问题，或者我缺少与范围相关的内容.问题是它发现元素是可见的，但是当它尝试单击它时会抛出错误，它无法使用递归找到它.

I am trying to click options in a dropdown with Nightwatch, using sections in page objects. I'm not sure if it's a problem with the section declaration or i'm missing something scope-related. Problem is that it finds the element as visible, but when it tries to click it will throw error that it cannot locate it using recursion.

我可以尝试做些什么来使用部分来解决这个问题?

What could i try to do to fix this issue using sections?

在测试中: 

var myPage = browser.page.searchPageObject();
var mySection = searchPage.section.setResults;

// [finding and clicking the dropdown so it opens and displays the options]
browser.pause (3000);

browser.expect.section('@setResults').to.be.visible.before(1000);
myPage.myFunction(mySection, '18');

在页面对象中:

var searchKeywordCommands = {
    myFunction: function (section, x) {
        section.expect.element('@set18').to.be.visible.before(2000);
        if (x == '18') section.click('@set18');
        //[...]
};

module.exports = {
    //[.. other elements and commands..]
    sections: {
        setResults: {
            selector: '.select-theme-result', //have also tried with '.select-content' and '.select-options' but with the same result
            elements: {
                set18: '.select-option[data-value="18"]',
                set36: '.select-option[data-value="36"]' //etc

            }}}}

这是我的源代码:

当我运行这块核心时，它似乎找到了该部分，找到了可见的元素(我也可以清楚地看到它打开了下拉列表并显示了选项)但是当我尝试单击任何选项时，我得到了错误: 错误:无法定位元素:Section[name=setResults], Element[name=@set18]" using: recursion

When i run this piece of core, it seems to find the section, finds the element visible (i also can clearly see that it opens the dropdown and shows the options) but when trying to click any option, i get the error: ERROR: Unable to locate element: Section[name=setResults], Element[name=@set18]" using: recursion

这是完整的错误:

我的尝试:

我试图将 set18 选择器声明为单独的元素，而不是在部分内部，这样一切正常，但在部分内部不起作用.我还尝试了所有可用的选择器来定义该部分的选择器，但它不适用于其中任何一个.

I have tried to declare that set18 selector as an individual element instead of inside of the section and everything works fine this way, but won't work inside of the section. I have also tried all the selectors available to define the section's selector, but it won't work with any of them.

推荐答案

这就是我正在做的(LOL)我假设步骤是(查找保管箱 - 单击保管箱 - 选择值).

This is what i am doing with(LOL) I assume steps would be (find dropbox - click dropbox - select value).

var getValueElement = {
        getValueSelector: function (x) {
            return 'li[data-value="'+ x + '"]';
        }
}; 

module.exports = {
    //[.. other elements and commands..]
    sections: {
        setResults: {
            commands:[getValueElement],
            selector: 'div[class*="select-theme-result"', //* mean contains,sometime class is too long and unique,also because i am lazy.
            elements: {
                setHighlight:'li[class*="select-option-highlight"]',
                setSelected:'li[class*="select-option-selected"]', 
                //set18: 'li[data-value="18"]',
                //set36: 'li[data-value="36"]' 
                // i think getValueFunction is better,what if you have 100+ of set.

            }}}}

在你的测试中

var myPage = browser.page.searchPageObject();
var mySection = searchPage.section.setResults;

// [finding and clicking the dropdown so it opens and displays the options]
mySection
     .click('@dropboxSelector')
     .waitForElementVisible('@setHighlight',5000,false,
          function(){
            var set18 = mySection.getValueElement(18);
            mySection.click(set18);
            });

Ps:在我的情况下(我也认为你的情况)，Dropbox 或任何在您的 Web 应用程序中多次使用的小型第三方 js 框架，所以最好为它创建一个不同的 PageObject，使 pageObject/section 变得简单尽可能.

Ps:in my case(i think your case also), dropbox or any small third-party js framework which is used many times in your web app, so better create a different PageObject for it,make pageObject/section is simple as possible.

相关文章