Browser Actions / Mouse Actions

Mouse actions are nothing but the simulating the mouse events like operation performed using Mouse.

We can simulate browser and keyboard actions using browser action in protractor, following are few methods present in the browser.actions().

    Mouse Actions :

  • mouseMove
  • dragAndDrop
  • click
  • doubleClick
  • mouseUp
  • mouseDown

  • Keyboard Actions :

  • keyDown
  • keyUp
  • sendKeys

perform() is methods which ill make the mouse to perform operation on the webpage, if you don't use perform then mouse & keyboard actions don't have any effect on the webpage.

We can combine few mouse and keyboard action methods as per out wish.

mouseMove / hover in protractor

Sometimes we may need to hover on an element to see it's properties like color, highlight, background and font, To perform hove we should use a method called mouseMove() from protractor api.

we will not stop with verifying element properties, we also have elements on HTML page those will be reveal only when you hover on them for example sub-menu.

With the actions object you should first move to menu element, and then move to the sub menu item and click it or perform whatever action you wish.

In below example we are hovering on a sub-menu which has id='sub-menu', sometime this method is also known as mouseHover()


import { browser, element, by, ElementFinder} from 'protractor'
describe('Protractor Typescript Demo', function() {
	browser.ignoreSynchronization = true; // for non-angular websites
	browser.manage().window().maximize()
	it('Mouse Operations', function() {
		// set implicit time to 30 seconds
		browser.manage().timeouts().implicitlyWait(30000);
		
		browser.get("https://chercher.tech/practice/practice-pop-ups-selenium-webdriver")
		// mouse hover on a submenu
		browser.actions().mouseMove(element(by.id("sub-menu"))).perform()
	});
});			


Menu reveling it sub-options on hover mouse-hover-protractor-actions

dragAndDrop in protractor

dragAndDrop() drags source element into the target element or to the place, dragAndDrop() method accepts two parameter, 1. Source: which you want to drag, 2. Target: where you want to drag

This has some issue with HTML 5 language, so if it is not working then it is because of it.


import { browser, element, by, ElementFinder} from 'protractor'
describe('Protractor Typescript Demo', function() {
	browser.ignoreSynchronization = true; // for non-angular websites
	browser.manage().window().maximize()
	it('Mouse Operations', function() {
		// set implicit time to 30 seconds
		browser.manage().timeouts().implicitlyWait(30000);
		
		browser.get("https://chercher.tech/practice/drag-and-drop-example")
		
		// perform drag and drop
		browser.actions().dragAndDrop(
			element(by.id("drag1")),
			element(by.id("div2"))
		).perform();
	});
});			


Ways to select dropdown option

click in mouse action with protractor api

click() method clicks a given element or at given location, it is always better to click an element than clicking a location.

Location of the elements may change based on display size of your computer.


import { browser, element, by, ElementFinder} from 'protractor'
describe('Protractor Typescript Demo', function() {
	browser.ignoreSynchronization = true; // for non-angular websites
	browser.manage().window().maximize()
	it('Mouse Operations', function() {
		// set implicit time to 30 seconds
		browser.manage().timeouts().implicitlyWait(30000);
		
		browser.get("https://chercher.tech/practice/practice-pop-ups-selenium-webdriver")
		
		// click the alert button
		browser.actions().click(element(by.name("alert"))).perform()		
	});
});			


click-mouse-action-protractor

Logging in Protractor using Winston

doubleClick using mouse actions in protractor

doubleClick() method simulates the double click of the mouse, we have to pass the element that to be double clicked.


import { browser, element, by, ElementFinder} from 'protractor'
describe('Protractor Typescript Demo', function() {
	browser.ignoreSynchronization = true; // for non-angular websites
	browser.manage().window().maximize()
	it('Mouse Operations', function() {
		// set implicit time to 30 seconds
		browser.manage().timeouts().implicitlyWait(30000);
		
		browser.get("https://chercher.tech/practice/practice-pop-ups-selenium-webdriver")
		
		// double click the double click  button
		browser.actions().doubleClick(element(by.id("double-click"))).perform();
	});
});			


double-click-protractor-mouse-actions

mouseUp & mouseUp in protractor actions

mouseUp and mouseDown methods are used to press the mouse primary button Up and down.

Depending on the system the primary key changes, mostly if you are right-handed then you might have your primary keys as left button.

We can choose which should primary and secondary in control panel.


import { browser, element, by, ElementFinder} from 'protractor'
describe('Protractor Typescript Demo', function() {
	browser.ignoreSynchronization = true; // for non-angular websites
	browser.manage().window().maximize()
	it('Mouse Operations', function() {
		// set implicit time to 30 seconds
		browser.manage().timeouts().implicitlyWait(30000);
		
		browser.get("https://chercher.tech/practice/drag-and-drop-example")
		
		// double click the double click  button
		// browser.actions().doubleClick(element(by.id("double-click"))).perform();
		browser.actions().mouseDown(element(by.id("drag1")).getWebElement()).perform()
		browser.actions().mouseMove(element(by.id("div2")).getWebElement()).perform()
		browser.actions().mouseUp().perform()
	});
});			


Send emails in protractor

keyUp & keyDown & sendkeys in protractor actions

keyUp and KeyDown methods are used to press keyboard keys in protractor with actions api.

These methods will be useful if you want to press a helper keys and normal like CTRL+A, SHIFT+A, CTRL+SHIFT+delete

Most of the all the keyboard actions are used together. In below example I am trying to set value "A" in search field of Google, but i am passing lower case letter in sendkeys with key press of Shift


import { browser, element, by, ElementFinder, ProtractorBrowser, protractor} from 'protractor'
describe('Protractor Typescript Demo', function() {
	browser.ignoreSynchronization = true; // for non-angular websites
	browser.manage().window().maximize()
	it('Mouse Operations', function() {
		// set implicit time to 30 seconds
		browser.manage().timeouts().implicitlyWait(30000);
		
		browser.get("https://google.com")
		browser.actions()
						.click(element(by.name("q")))
						.keyDown(protractor.Key.SHIFT)
						.sendKeys("a")
						.keyUp(protractor.Key.SHIFT)
						.perform()
	});
});			


keydown-keyup-sendkeys-protractor-keyboard-actions

Sendkeys with Javascript Executor in Protractor

Protractor Interview Questions

About Author

Myself KarthiQ, I am the author of this blog, I know ways to write a good article but some how I donot have the skills to make it to reach people, would you like help me to reach more people By sharing this Article in the social media.

Share this Article Facebook
Comment / Suggestion Section
Point our Mistakes and Post Your Suggestions
  • kamal
    Is there any way we can run the double click on firefox browser, I did the same thing which you have done but it won't be work for firefox 
    Reply
    • karthiQ [ admin]
      Please let us know the code you have used, chrome has some issues.
      Mean while try with JQuery
      Reply
  • Recent Addition

    new tutorial Protractor Online Training : We have closed registration for training

    Please do email to chercher.tech@gmail.com for any queries

    If you already registered then please do check your email for the Webex link for the training starting from 15th Nov 2018
     
    Join My Facebook Group
    Join Group