jjzjj

javascript - isDisplayed 为 Protractor 中的可见元素返回 false

coder 2023-08-04 原文

编辑#4:突破!!

我开始递归地遍历父节点并返回与下面相同的值。其中一个父项——内部 mat-drawer-container——也为 isDisplayed 返回 false(所有其他父项返回 true,这看起来很奇怪)。

查看该节点,发现它是网站上唯一具有 display: contents CSS 的标签。删除它会导致有问题的按钮——它下面的所有其他内容——为 isDisplayed 返回 true。哎呀, Protractor 甚至可以点击按钮,我可以在浏览器中看到预期的结果。

现在我想问题仍然存在:这是预期的行为还是错误?它不像有一个带有 display: contents applied 的祖先那么简单;我将它直接应用于 rb-container,Protractor 仍然能够找到按钮。


我第一次在 Protractor 中进行端到端测试,在尝试测试按钮是否可见时遇到了问题;尽管按钮元素在 DOM 中并且可见,但 isDisplayed 返回 false 并且我的断言失败。

这是失败的初始断言:

expect(element(by.css("mat-drawer-content rb-container rb-fab-button[data-qaid='create-button'] > button")).isDisplayed()).toBe(true);

(是的,选择器一团糟,但我无法控制 HTML。)

我使用了很长的 browser.sleep() 时间间隔来暂停浏览器,这样我就可以使用开发工具来检查人类可见的元素,CSS 让我相信它应该被检测为可见.

在搜索答案和/或错误无果后,我将一些信息记录到控制台,这仍然让我相信 isDisplayed 应该返回 true:

[ EDITS #2, #3 记录了一些关于 rb-container 的所有直接子代的更多信息;根据 Protractor,只有一个节点是“可见的”。 ]

  let selector = element.all(by.tagName("mat-drawer-content")).get(0).all(by.css("rb-container > *"));

  selector.count().then(function(selCount) {

    for (let match = 0; match < selCount; match ++) {

      browser.sleep(1000).then(() => {
        let elm = selector.get(match);

        console.log("\n >> " + match + "]");

        elm.getTagName().then(tag => { console.log("tag name:", tag); });
        elm.getCssValue("visibility").then(vis => { console.log("visibility:", vis); });
        elm.getCssValue("display").then(disp => { console.log("display:", disp); });
        elm.getCssValue("opacity").then(opa => { console.log("opacity:", opa); });
        elm.getCssValue("overflow").then(ov => { console.log("overflow:", ov); });
        elm.getAttribute("hidden").then(hid => { console.log("hidden:", hid); });
        elm.getAttribute("class").then(c => { console.log("class:", c)});
        elm.getSize().then(size => { console.log("size:", size); });
        elm.getCssValue("position").then(ov => { console.log("position:", ov); });
        elm.getLocation().then(loc => { console.log("location:", loc); });
        elm.isPresent().then(pres => { console.log("isPresent:", pres); });
        elm.isDisplayed().then(disp => { console.log("isDisplayed:", disp); });
      });

    }

  });

这是我看到的日志:

 >> 0]
tag name: div
visibility: visible
display: block
opacity: 1
overflow: auto
hidden: null
class: title-tab dn db-m mediumGreyColor pl4 pv2 overflow-auto
size: { ceil: {},
  clone: {},
  floor: {},
  height: 62,
  round: {},
  scale: {},
  toString: {},
  width: 898 }
position: static
location: { ceil: {},
  clone: {},
  floor: {},
  round: {},
  scale: {},
  toString: {},
  translate: {},
  x: 0,
  y: 74.765625 }
isPresent: true
isDisplayed: false

 >> 1]
tag name: div
visibility: visible
display: block
opacity: 1
overflow: auto
hidden: null
class: player-menu container overflow-auto dn db-m pv2 ng-star-inserted
size: { ceil: {},
  clone: {},
  floor: {},
  height: 64,
  round: {},
  scale: {},
  toString: {},
  width: 834 }
position: static
location: { ceil: {},
  clone: {},
  floor: {},
  round: {},
  scale: {},
  toString: {},
  translate: {},
  x: 32,
  y: 136.765625 }
isPresent: true
isDisplayed: false

 >> 2]
tag name: rb-fab-button
visibility: visible
display: block
opacity: 1
overflow: visible
hidden: null
class: add-fab-button absolute dn db-m ng-star-inserted
size: { ceil: {},
  clone: {},
  floor: {},
  height: 56,
  round: {},
  scale: {},
  toString: {},
  width: 56 }
position: absolute
location: { ceil: {},
  clone: {},
  floor: {},
  round: {},
  scale: {},
  toString: {},
  translate: {},
  x: 762,
  y: 154.765625 }
isPresent: true
isDisplayed: false

 >> 3]
tag name: div
visibility: visible
display: block
opacity: 1
overflow: visible
hidden: null
class: mr4-l w-100-m
size: { ceil: {},
  clone: {},
  floor: {},
  height: 0,
  round: {},
  scale: {},
  toString: {},
  width: 834 }
position: static
location: { ceil: {},
  clone: {},
  floor: {},
  round: {},
  scale: {},
  toString: {},
  translate: {},
  x: 32,
  y: 200.765625 }
isPresent: true
isDisplayed: false

 >> 4]
tag name: rb-table-wrapper
visibility: visible
display: block
opacity: 1
overflow: visible
hidden: null
class: dn db-m
size: { ceil: {},
  clone: {},
  floor: {},
  height: 672,
  round: {},
  scale: {},
  toString: {},
  width: 834 }
position: static
location: { ceil: {},
  clone: {},
  floor: {},
  round: {},
  scale: {},
  toString: {},
  translate: {},
  x: 32,
  y: 200.765625 }
isPresent: true
isDisplayed: true

 >> 5]
tag name: div
visibility: visible
display: block
opacity: 1
overflow: visible
hidden: null
class: container
size: { ceil: {},
  clone: {},
  floor: {},
  height: 0,
  round: {},
  scale: {},
  toString: {},
  width: 834 }
position: static
location: { ceil: {},
  clone: {},
  floor: {},
  round: {},
  scale: {},
  toString: {},
  translate: {},
  x: 32,
  y: 872.5625 }
isPresent: true
isDisplayed: false

 >> 6]
tag name: rb-table-wrapper
visibility: visible
display: none
opacity: 1
overflow: visible
hidden: null
class: db dn-m
size: { ceil: {},
  clone: {},
  floor: {},
  height: 0,
  round: {},
  scale: {},
  toString: {},
  width: 0 }
position: static
location: { ceil: {},
  clone: {},
  floor: {},
  round: {},
  scale: {},
  toString: {},
  translate: {},
  x: 0,
  y: 0 }
isPresent: true
isDisplayed: false

 >> 7]
tag name: div
visibility: visible
display: none
opacity: 1
overflow: auto
hidden: null
class: player-menu container overflow-auto db dn-m ng-star-inserted
size: { ceil: {},
  clone: {},
  floor: {},
  height: 0,
  round: {},
  scale: {},
  toString: {},
  width: 0 }
position: static
location: { ceil: {},
  clone: {},
  floor: {},
  round: {},
  scale: {},
  toString: {},
  translate: {},
  x: 0,
  y: 0 }
isPresent: true
isDisplayed: false

在没有设置隐藏属性、显示值不是“无”、可见性设置为“可见”以及非零尺寸的情况下,我希望 isDisplayed 返回 true。

查看节点 4(isDisplayed 返回 true 的唯一子元素)并将其与节点 2(我尝试访问的 rb-fab-button 元素)进行比较很有趣。我能看到的唯一明显区别是 rb-fab-button 是绝对定位的;但是,对于 isDisplayed,其他静态定位的元素也会返回 false。

我错过了什么吗?我愿意检查 css 可见性,但我的下一个测试是单击该按钮,如果该元素不可见,则会出错。

[ 编辑 #1: 添加了一些 HTML: ]

<mat-drawer-container _ngcontent-c0="" class="root-container w-100 mat-drawer-container mat-drawer-container-explicit-backdrop" hasbackdrop="true" ng-reflect-has-backdrop="true">
    <div class="mat-drawer-backdrop ng-star-inserted"></div>
    <div tabindex="-1" class="cdk-visually-hidden cdk-focus-trap-anchor"></div>
    <mat-drawer _ngcontent-c0="" class="mobile-drawer dn-m w-80 mat-drawer ng-tns-c2-0 ng-trigger ng-trigger-transform mat-drawer-over ng-star-inserted" tabindex="-1" ng-reflect-mode="over" style="box-shadow: none; visibility: hidden;">
      <!-- [... mobile nav ...] -->
    </mat-drawer>
    <div tabindex="-1" class="cdk-visually-hidden cdk-focus-trap-anchor"></div>
    <mat-drawer-content _ngcontent-c0="" class="mat-drawer-content">
        <rb-navbar _ngcontent-c0="" _nghost-c7="" class="ng-star-inserted">
          <!-- [... nav bar ...] -->
        </rb-navbar>
        <div _ngcontent-c0="" class="main-body">
            <div _ngcontent-c0="" class="container h-100">
                <router-outlet _ngcontent-c0=""></router-outlet>
                <rb-system-setup _nghost-c18="" class="ng-star-inserted">
                    <router-outlet _ngcontent-c18=""></router-outlet>
                    <rb-site-tab class="ng-star-inserted">
                        <mat-drawer-container autosize="" class="mat-drawer-container" ng-reflect-autosize="">
                            <div class="mat-drawer-backdrop ng-star-inserted"></div>
                            <div tabindex="-1" class="cdk-visually-hidden cdk-focus-trap-anchor"></div>
                            <mat-drawer class="mat-drawer ng-tns-c2-8 ng-trigger ng-trigger-transform mat-drawer-end mat-drawer-over ng-star-inserted" disableclose="true" mode="over" position="end" tabindex="-1" ng-reflect-position="end" ng-reflect-mode="over" ng-reflect-disable-close="true" style="box-shadow: none; visibility: hidden;">
                                <rb-create-site _nghost-c20="" ng-reflect-side-panel="[object Object]" ng-reflect-side-panel-container="[object Object]" ng-reflect-ng-grid="[object Object]" ng-reflect-is-editing="false" ng-reflect-timezones="[object Object],[object Object">
                                    <rb-side-panel _ngcontent-c20="" _nghost-c24="" ng-reflect-title="Add Site" ng-reflect-close-button-label="Cancel" ng-reflect-submit-button-label="CREATE_SITE.SUBMIT" ng-reflect-show-submit-button="true" ng-reflect-modal-submitting="true" ng-reflect-side-panel-container="[object Object]">
                                      <!-- [... side panel ...] -->
                                    </rb-side-panel>
                                </rb-create-site>
                            </mat-drawer>
                            <div tabindex="-1" class="cdk-visually-hidden cdk-focus-trap-anchor"></div>
                            <mat-drawer-content cdkscrollable="" class="mat-drawer-content ng-star-inserted">
                                <div class="ph4-m h-100">
                                    <rb-card _nghost-c21="">
                                        <div _ngcontent-c21="" class="card rb-min-width-1 h-100">
                                            <div _ngcontent-c21="" class="relative h-100">
                                                <rb-container _nghost-c22="" ng-reflect-row-data="[object Object]" ng-reflect-show-player="true" ng-reflect-show-search-bar="true" ng-reflect-include-edit="true" ng-reflect-include-delete="true" ng-reflect-include-stop="false" ng-reflect-include-sync="false" ng-reflect-include-checkbox="true" ng-reflect-include-fab-button="true" ng-reflect-route-type="systemSetup" ng-reflect-header="Sites" ng-reflect-mobile-table="site" ng-reflect-show-site-selector="false" ng-reflect-mobile-navigation="true">
                                                    <div _ngcontent-c22="" class="title-tab dn db-m mediumGreyColor pl4 pv2 overflow-auto">
                                                        <h1 _ngcontent-c22="" class="header-text pa2 fl ng-star-inserted">Sites</h1></div>
                                                    <div _ngcontent-c22="" class="player-menu container overflow-auto dn db-m pv2 ng-star-inserted">
                                                      <!-- [... player menu ...] -->
                                                    </div>
                                                    <rb-fab-button _ngcontent-c22="" class="add-fab-button absolute dn db-m ng-star-inserted" data-qaid="create-button" _nghost-c28="">
                                                        <button _ngcontent-c28="" class="w-10 z-1 mat-fab mat-accent" mat-fab="" type="button" ng-reflect-disabled="false"><span class="mat-button-wrapper"><mat-icon _ngcontent-c28="" aria-label="add" class="mat-icon material-icons ng-star-inserted" role="img" aria-hidden="true">add</mat-icon></span>
                                                            <div class="mat-button-ripple mat-ripple mat-button-ripple-round" matripple="" ng-reflect-centered="false" ng-reflect-disabled="false" ng-reflect-trigger="[object HTMLButtonElement]"></div>
                                                            <div class="mat-button-focus-overlay"></div>
                                                        </button>
                                                    </rb-fab-button>
                                                    <div _ngcontent-c22="" class="mr4-l w-100-m"></div>
                                                    <rb-table-wrapper _ngcontent-c22="" class="dn db-m" ng-reflect-row-data="[object Object]" ng-reflect-enable-sorting="true" ng-reflect-include-checkbox="true" ng-reflect-is-clickable="false" ng-reflect-row-selection="multiple" ng-reflect-dom-layout="" ng-reflect-columns="[object Object],[object Object" ng-reflect-un-select-all_="[object Object]" ng-reflect-mobile-table="site" ng-reflect-mobile-navigation="true" ng-reflect-row-drag="false" ng-reflect-row-drag-field-name="">
                                                        <ag-grid-angular class="ag-theme-material" ng-reflect-grid-options="[object Object]" ng-reflect-row-data="[object Object]" ng-reflect-column-defs="[object Object],[object Object" ng-reflect-default-col-def="[object Object]" ng-reflect-row-selection="multiple" ng-reflect-suppress-row-click-selection="true" ng-reflect-enable-sorting="true" ng-reflect-enable-filter="true" ng-reflect-suppress-no-rows-overlay="true" ng-reflect-dom-layout="" ng-reflect-row-drag-managed="false">
                                                          <!-- [... data grid ...] -->
                                                        </ag-grid-angular>
                                                        <div class="backgroundColor w-100 fixed bottom-0 left-0 dn db-m ng-star-inserted">
                                                            <div class="item-selection fr w-20">0/ 1 Selected</div>
                                                        </div>
                                                    </rb-table-wrapper>
                                                    <div _ngcontent-c22="" class="player-menu container overflow-auto db dn-m ng-star-inserted"></div>
                                                </rb-container>
                                            </div>
                                        </div>
                                    </rb-card>
                                </div>
                            </mat-drawer-content>
                        </mat-drawer-container>
                    </rb-site-tab>
                </rb-system-setup>
            </div>
            <div _ngcontent-c0="" class="snacks fixed mw6 rb-min-width-2">
                <rb-global-snack-bar _ngcontent-c0="" _nghost-c8="" class="ng-tns-c8-3">
                    <div _ngcontent-c8="" class="snackBar">
                        <ul _ngcontent-c8="" class="ma0 pa0 list"></ul>
                    </div>
                </rb-global-snack-bar>
            </div>
        </div>
    </mat-drawer-content>
</mat-drawer-container>

最佳答案

我开始递归地遍历父节点并返回与下面相同的值。其中一个父项——内部 mat-drawer-container——也为 isDisplayed 返回 false(所有其他父项返回 true,这看起来很奇怪)。

查看该节点,发现它是网站上唯一具有 display: contents CSS 的标签。删除它会导致有问题的按钮——它下面的所有其他内容——为 isDisplayed 返回 true。哎呀, Protractor 甚至可以点击按钮,我可以在浏览器中看到预期的结果。

现在我想问题仍然存在:这是预期的行为还是错误?它不像有一个带有 display: contents applied 的祖先那么简单;我将它直接应用于 rb-container,Protractor 仍然能够找到按钮。

我打开了an issue on the protractor GitHub这样他们就可以进一步调查。


[更新:我已经在 GitHub 上更新了这个问题,但我想我也会在这里分享:]

经过一些挖掘,我发现它是两种样式声明的组合:display: contentsoverflow: hidden

从表面上看,您不应该真正将它们一起使用这听起来像是常识,因为您试图隐藏实际上并不存在的容器元素的溢出;但是,我觉得如果所述元素的子元素正在被浏览器渲染为可见——在这种情况下,它是——它可能应该被 Protractor 检测为可见。

HTML/CSS:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>isDisplayed() issue</title>
    <style>

    .not-displayed .display-contents {
        overflow: hidden;
        display: contents; 
    }

    </style>
</head>
<body>

<div class="not-displayed">
    <div class="display-contents">
        <div class="wrong">isDisplayed() returns false</div>
    </div>
</div>

<div class="displayed">
    <div class="display-contents">
        <div class="right">isDisplayed() returns true</div>
    </div>
</div>

</body>
</html>

规范文件:

import { browser, by, element } from 'protractor';

describe('Testing the Protractor Bug', () => {

    it('should display debugging info', () => {

        browser.waitForAngularEnabled(false);
        browser.get('_[file location]_');

        element(by.css('.wrong')).isDisplayed().then(disp => { console.log('"wrong" isDisplayed:', disp); });
        element(by.css('.right')).isDisplayed().then(disp => { console.log('"right" isDisplayed:', disp); });

    });
});

输出结果:

[17:04:50] I/launcher - Running 1 instances of WebDriver
[17:04:50] I/direct - Using ChromeDriver directly...

DevTools listening on ws://127.0.0.1:59412/devtools/browser/3f76f1a9-25f5-4497-8ae3-6933d01d0c7e
Jasmine started
"wrong" isDisplayed: false
"right" isDisplayed: true

  Testing the Protractor Bug
    √ should display debugging info

Executed 1 of 1 spec SUCCESS in 0.202 sec.
[17:04:53] I/launcher - 0 instance(s) of WebDriver still running
[17:04:53] I/launcher - chrome #01 passed

关于javascript - isDisplayed 为 Protractor 中的可见元素返回 false,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52174578/

有关javascript - isDisplayed 为 Protractor 中的可见元素返回 false的更多相关文章

  1. ruby - 如何从 ruby​​ 中的字符串运行任意对象方法? - 2

    总的来说,我对ruby​​还比较陌生,我正在为我正在创建的对象编写一些rspec测试用例。许多测试用例都非常基础,我只是想确保正确填充和返回值。我想知道是否有办法使用循环结构来执行此操作。不必为我要测试的每个方法都设置一个assertEquals。例如:describeitem,"TestingtheItem"doit"willhaveanullvaluetostart"doitem=Item.new#HereIcoulddotheitem.name.shouldbe_nil#thenIcoulddoitem.category.shouldbe_nilendend但我想要一些方法来使用

  2. ruby - 其他文件中的 Rake 任务 - 2

    我试图在一个项目中使用rake,如果我把所有东西都放到Rakefile中,它会很大并且很难读取/找到东西,所以我试着将每个命名空间放在lib/rake中它自己的文件中,我添加了这个到我的rake文件的顶部:Dir['#{File.dirname(__FILE__)}/lib/rake/*.rake'].map{|f|requiref}它加载文件没问题,但没有任务。我现在只有一个.rake文件作为测试,名为“servers.rake”,它看起来像这样:namespace:serverdotask:testdoputs"test"endend所以当我运行rakeserver:testid时

  3. ruby-on-rails - Ruby net/ldap 模块中的内存泄漏 - 2

    作为我的Rails应用程序的一部分,我编写了一个小导入程序,它从我们的LDAP系统中吸取数据并将其塞入一个用户表中。不幸的是,与LDAP相关的代码在遍历我们的32K用户时泄漏了大量内存,我一直无法弄清楚如何解决这个问题。这个问题似乎在某种程度上与LDAP库有关,因为当我删除对LDAP内容的调用时,内存使用情况会很好地稳定下来。此外,不断增加的对象是Net::BER::BerIdentifiedString和Net::BER::BerIdentifiedArray,它们都是LDAP库的一部分。当我运行导入时,内存使用量最终达到超过1GB的峰值。如果问题存在,我需要找到一些方法来更正我的代

  4. ruby-on-rails - Rails 3 中的多个路由文件 - 2

    Rails2.3可以选择随时使用RouteSet#add_configuration_file添加更多路由。是否可以在Rails3项目中做同样的事情? 最佳答案 在config/application.rb中:config.paths.config.routes在Rails3.2(也可能是Rails3.1)中,使用:config.paths["config/routes"] 关于ruby-on-rails-Rails3中的多个路由文件,我们在StackOverflow上找到一个类似的问题

  5. ruby-on-rails - Rails - 一个 View 中的多个模型 - 2

    我需要从一个View访问多个模型。以前,我的links_controller仅用于提供以不同方式排序的链接资源。现在我想包括一个部分(我假设)显示按分数排序的顶级用户(@users=User.all.sort_by(&:score))我知道我可以将此代码插入每个链接操作并从View访问它,但这似乎不是“ruby方式”,我将需要在不久的将来访问更多模型。这可能会变得很脏,是否有针对这种情况的任何技术?注意事项:我认为我的应用程序正朝着单一格式和动态页面内容的方向发展,本质上是一个典型的网络应用程序。我知道before_filter但考虑到我希望应用程序进入的方向,这似乎很麻烦。最终从任何

  6. ruby - 为什么 4.1%2 使用 Ruby 返回 0.0999999999999996?但是 4.2%2==0.2 - 2

    为什么4.1%2返回0.0999999999999996?但是4.2%2==0.2。 最佳答案 参见此处:WhatEveryProgrammerShouldKnowAboutFloating-PointArithmetic实数是无限的。计算机使用的位数有限(今天是32位、64位)。因此计算机进行的浮点运算不能代表所有的实数。0.1是这些数字之一。请注意,这不是与Ruby相关的问题,而是与所有编程语言相关的问题,因为它来自计算机表示实数的方式。 关于ruby-为什么4.1%2使用Ruby返

  7. ruby-on-rails - Rails 3.2.1 中 ActionMailer 中的未定义方法 'default_content_type=' - 2

    我在我的项目中添加了一个系统来重置用户密码并通过电子邮件将密码发送给他,以防他忘记密码。昨天它运行良好(当我实现它时)。当我今天尝试启动服务器时,出现以下错误。=>BootingWEBrick=>Rails3.2.1applicationstartingindevelopmentonhttp://0.0.0.0:3000=>Callwith-dtodetach=>Ctrl-CtoshutdownserverExiting/Users/vinayshenoy/.rvm/gems/ruby-1.9.3-p0/gems/actionmailer-3.2.1/lib/action_mailer

  8. ruby - 默认情况下使选项为 false - 2

    这是在Ruby中设置默认值的常用方法:classQuietByDefaultdefinitialize(opts={})@verbose=opts[:verbose]endend这是一个容易落入的陷阱:classVerboseNoMatterWhatdefinitialize(opts={})@verbose=opts[:verbose]||trueendend正确的做法是:classVerboseByDefaultdefinitialize(opts={})@verbose=opts.include?(:verbose)?opts[:verbose]:trueendend编写Verb

  9. ruby-on-rails - Rails 应用程序中的 Rails : How are you using application_controller. rb 是新手吗? - 2

    刚入门rails,开始慢慢理解。有人可以解释或给我一些关于在application_controller中编码的好处或时间和原因的想法吗?有哪些用例。您如何为Rails应用程序使用应用程序Controller?我不想在那里放太多代码,因为据我了解,每个请求都会调用此Controller。这是真的? 最佳答案 ApplicationController实际上是您应用程序中的每个其他Controller都将从中继承的类(尽管这不是强制性的)。我同意不要用太多代码弄乱它并保持干净整洁的态度,尽管在某些情况下ApplicationContr

  10. ruby-on-rails - form_for 中不在模型中的自定义字段 - 2

    我想向我的Controller传递一个参数,它是一个简单的复选框,但我不知道如何在模型的form_for中引入它,这是我的观点:{:id=>'go_finance'}do|f|%>Transferirde:para:Entrada:"input",:placeholder=>"Quantofoiganho?"%>Saída:"output",:placeholder=>"Quantofoigasto?"%>Nota:我想做一个额外的复选框,但我该怎么做,模型中没有一个对象,而是一个要检查的对象,以便在Controller中创建一个ifelse,如果没有检查,请帮助我,非常感谢,谢谢

随机推荐