如何通过量角器单击 div 类中深埋的按钮。没有身份证答案

【问题标题】：How to click on a deeply buried button in div classes via protractor. No id如何通过量角器单击 div 类中深埋的按钮。没有身份证
【发布时间】：2019-09-03 12:37:06
【问题描述】：

我正在尝试通过量角器单击隐藏在代码中的 div 类中的按钮。

我正在为我的工作开创一个量角器项目，并且已经到了我不再知道该怎么做的地步。我有一个隐藏在 div 类中的按钮，不允许我单击。我尝试使用 mouseMove 来获取按钮的坐标，我尝试使用特定按钮的 className 等。按钮没有 id。 id 不是问题，因为我尝试通过它的 id 单击另一个按钮，同样隐藏在 div 中。我需要知道如何通过 div 层才能单击按钮，因为其余的测试将依赖于它。

APPLICATION CODE:
::before
<dashboard-label>
    <div class="att-topic-analysis-tabs">
       <div class="att-button-group">
          <button class="btn btn-default btn-lg att-close-topic ng-scope" 
           role="presentation" tabindex="-1" 
           ng-click="removeTopic(currentTopic.id)" translate> 
          Close Topic
          </button>
       </div>
    </div>

PROTRACTOR TEST:
it('Closes Topic Successfully', function(){
    //opens the first available topic
    openTopic.click();

    //checks that the URL contains 'topics' after 5 seconds
    browser.wait(proExpect.urlContains('topics'), 5000);
    var closeTopic = element(by.className('att-close-topic'));
    //browser.wait(proExpect.elementToBeClickable(closeTopicButton), 5000);
    console.log(closeTopic);
    closeTopic.click();



    browser.wait(proExpect.urlContains('home'), 5000);

});

如您所见，关闭主题按钮有点隐藏在 div 类中，标准点击不起作用。任何信息将不胜感激

【问题讨论】：

找到按钮了吗？即closeTopic 是否已定义并且点击不起作用？
是的，点击不起作用
我有一个登录测试，它也点击了一个很好用的按钮！唯一不同的是它没有埋在div中
您是否有可能在元素可点击之前尝试点击它？量角器具有适合这种场合的功能。 protractortest.org/#/…
我会试试的

标签： angularjs selenium protractor

【解决方案1】：

这是您想要阅读的内容，以帮助您调试为什么您的测试不起作用。此外，您可能希望开始采用等待/异步，因为控制流将来会消失。 http://www.protractortest.org/#/debugging

【讨论】：

【解决方案2】：

如果closeTopic 定位器正在查找元素，但未能单击它，请检查以确保 DOM 中只有一个匹配元素，并且它是可见的。我最喜欢的检查 DOM 的方法是在 Chrome 检查器中使用 ctrl-F 并粘贴测试使用的确切 CSS (.att-close-topic)。要检查它得到的东西是否可见，请使用

console.log(closeTopic.isDisplayed());

这可能是量角器中的一个大问题，因为当页面上有多个匹配项时它不会失败（仅警告），并且默认为第一个匹配项而不是第一个匹配项可见匹配，这让我抓狂，因为你很少会想要对页面上的不可见元素做任何事情。

这将部分是意见，但只是为了给对话增加一个层次......

有时，在页面上找到麻烦元素的解决方案是返回给开发人员并让页面更具可测试性。我见过测试人员花费数小时或数天时间制定出色的解决方法来访问一个顽固的元素，最终结果是一个脆弱、复杂的端到端测试（它们还不够脆弱吗？）。

有时，与开发人员进行 5 分钟的对话可以快速更改生产代码（例如添加唯一 ID），从而避免所有这些工作并产生更好、更稳定、更简单的结果。但这需要开发人员和测试团队之间的公开对话，以及一种将测试视为一项主要活动的文化，足以对生产代码进行可测试性更改，而这些代码原本可以正常工作。

【讨论】：

非常感谢。我想我会要求开发人员让这个更容易访问。这是一个非常大的应用程序，尚未构建用于处理自动化前端测试。我知道有几种更简单的方法可以完成这项工作。谢谢

【解决方案3】：

试试这个

var closebutton=element(by.css("[ng-click="removeTopic(currentTopic.id)"]"), EC = 量角器.ExpectedConditions;

等待元素可点击。检查按钮的显示和启用状态 browser.wait(EC.elementToBeClickable(closebutton), 10000);

现在使用：closebutton.click();

【讨论】：