Mehar44 Mehar44 - 1 month ago 7
HTML Question

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

I am writing a simple protractor test for my website login and logout functionality.
the login test is running fine, but I don't know how to write a test for logout as the logout link appears in the drop down menu after hovering on an icon

<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>


How can I access the last
<a>
for logout option as it has no
id
or
class
and also the element would be hidden as it appears only on
hover
.
I have written this test for login.

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();
})
});


So basically my question is How can I get the hidden element with no id , no class. I have searched but could not find any solution so far. Please help !

UPDATE :
I have tried this for logout but it is giving this error
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();


My Solution :

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


This thing worked for me!

Answer

First, you need to move the mouse cursor and keep on drop down element. So all drop down menu options becomes visible. Now move cursor to logout link and click. You can follow the below code:

Code Snippet

 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();
 });

FYI: Update drop down and logout link locators in case above mentioned locators failed to findout the elements