如何编写用量角器单击下拉菜单中的选项的测试？

Question

我正在为我的网站登录和注销功能编写一个简单的量角器测试。登录测试运行很好，但我不知道如何编写注销测试，因为将鼠标悬停在图标

上后，下拉菜单中会出现注销 link

<div class="dropdownx">
  <a href="#link" class="my-account"><i class="fa fa-user"></i></a>
  <div class="dropdownx-content" style="text-align:center; margin-left:-60px; ">
    <p><a href="#account">My Account</a></p>
    <p><a href="#order_history">Order History</a></p>
    <p><a href="#downloads">Downloads</a></p>
    <p><a href="#transactions">Transactions</a></p>
    <p><a href="#wishlist" id="wishlist-total">Wish List (0)</a></p>
    <p><a href="#logout">Logout</a></p>
  </div>
</div>

我如何访问最后一个 <a> 用于注销选项，因为它没有 id 或 class，而且该元素将被隐藏，因为它只出现在 hover. 我写了这个登录测试。

describe('To test mdpocket login window', function(){
it('should be able to login', function() {
    browser.driver
    browser.driver.get('login_page_link');
    browser.driver.findElement(by.css('#input-email')).sendKeys("email@gmail.com");
    browser.driver.findElement(by.css('#input-password')).sendKeys("some_password_here");
    var login = browser.driver.findElement(by.css('#button-login'))
    login.click();
})
});

所以基本上我的问题是如何获得没有 id 的隐藏元素，没有 class。我已经搜索但到目前为止找不到任何解决方案。请帮忙！

更新： 我试过这个注销但是它给出了这个错误 Process exited with error code 1

var dropDown = browser.driver.findElement(by.css('.dropdownx'));
browser.actions().mouseMove(dropDown).perform();
browser.driver.findElement(By.xpath("//a[text() = 'Logout']")).click();

我的解决方案：

var dropDown = browser.driver.findElement(by.css('.my-account'))
browser.actions().mouseMove(dropDown).perform();
browser.driver.findElement(By.xpath("//a[text() = 'Logout']")).click();

这东西对我有用！

Answer 1

首先，您需要移动鼠标光标并保持下拉元素。因此所有下拉菜单选项都可见。现在将光标移动到注销 link 并单击。您可以按照以下代码：

代码段

 var EC=protractor.ExpectedConditions;
 var dropDown=element(by.css(".dropdownx"));
 var logoutLink=element(by.css('a[href="#logout"]'));

 browser.actions().mouseMove(dropDown).perform().then(function(){
   browser.wait(EC.visibilityOf(dropDown),8000,'Logout Link is not visible');
   browser.actions().mouseMove(logoutLink).click().perform();
 });

仅供参考：更新下拉列表并注销 link 定位器，以防上述定位器无法找到元素

Answer 2

这可能有帮助：

var dropDown = element(by.css(".dropdownx"));

browser.actions().mouseMove(dropDown).perform().then(function () {
    element(by.className('dropdownx-content')).all(by.tagName('a')).filter(function (elem, index) {
        return elem.getText().then(function (val) {
            return val === 'Logout'
        })
    }).first().click();
});

如何编写用量角器单击下拉菜单中的选项的测试？

How to write a test for clicking an option in the drop down menu with protractor?

html

jquery

protractor

e2e-testing