我无法使用 Nightwatch 单击模态按钮答案

【问题标题】：I can't click modals buttons with Nightwatch我无法使用 Nightwatch 单击模态按钮
【发布时间】：2016-05-13 14:51:54
【问题描述】：

我在任何地方都找不到如何单击模态按钮。困难的部分是这个网站中的所有模态按钮都有相同的 id，所以当我尝试简单的 click() 命令时，它只适用于网站的第一个模态。

编辑

其实我的错。我无法点击 modal 的按钮。

编辑 2
我有两个页面都出现了相同的模式。我的问题是当我尝试在第二页中点击这些按钮时。似乎它只对拳头模态有反应。

<body class="bg ng-scope" ng-app="app">
<div class="ng-scope" autoscroll="true" ui-view="" style="">
<div class="ng-scope" src="'/js/layout/navbar.html'" ng-include="" style="">
<div id="searchContainer" class="container ng-scope">
<div id="resultsContainer" class="container ng-scope ng-hide" ng-show="vm.isAvailable"> </div>
<div class="ng-scope" src="'/js/layout/modals.html'" ng-include="" style="">
<script id="myModalContent.html" class="ng-scope" type="text/ng-template">
<div class="modal fade children-policy-modal ng-scope">
<div class="modal fade articles-modal ng-scope">
<div class="modal fade booking-code-modal ng-scope" style="display: none;">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<form class="ng-pristine ng-invalid ng-invalid-required" role="form" name="vm.bookingCodeForm">
<div class="modal-header">
<div class="modal-body">
<div class="modal-footer">
<button class="btn btn-info btn-sm ng-binding" ng-click="vm.checkBookingCode()" type="submit">BUTTON 1</button>
<button class="btn btn-default ng-binding" data-dismiss="modal" type="button">BUTTON2</button>

编辑 3 我使用了以下代码

.click('a[data-target=".voucher-code-modal"]')
      .waitForElementVisible('button[class="btn btn-default ng-binding"]', 5000)
      .click('button[class="btn btn-default ng-binding"]')

我收到以下消息

警告：waitForElement 为选择器按钮找到 9 个元素[class="btn btn-default ng-binding"]'}。只会检查第一个。

然后我因为时间而超时。

【问题讨论】：

每当模态框出现或消失时..它的 HTML 标记或其父标记的属性会发生变化，例如：样式属性更改为 display:block / none" 您需要找到哪个属性变化
实际上样式属性发生了变化。但这对我有什么帮助？

标签： selenium nightwatch.js

【解决方案1】：

所以你的 xpath 应该是这样的：.//div[@id='your id' and contains(@style,'display: block')] 这只会给出那些出现在点击时的模态..还确保上面 xpath 的结果计数应该是 1..请注意上面的 xpath 没有尝试过并且经过测试，但这些内容应该会给你答案。

【讨论】：

我的 Xpath 应该是绝对的吗？我可以用 css 选择器做到这一点吗？
XPath 必须始终是相对的，是的，您也应该能够使用 css 执行此操作。如果您可以将 HTML 添加到帖子中，以便我们可以建议相关的定位器，那将是值得的跨度>

【解决方案2】：

我使用以下内容在模态窗口中选择了一个文本区域

'md-dialog[aria-label="Url Document ..."] textarea[name="description"]'

这使我的设置值代码看起来像

.setValue('md-dialog[aria-label="Url Document ..."] textarea[name="description"]', 'random string')

不是最好的代码行，但 Page Objects 可以让你整理它。

根据我在你的代码 sn-p 中可以得出的结果，你会想要类似的东西

.click(form[name='vm.bookingCodeForm'] button[type='submit'])

【讨论】：

不，我得到了和我的代码一样的错误。我编辑了帖子。