Nightwatch.js: Drag and Drop - selenium

I am trying to test a drag and drop operation using Nightwatch.js 0.8.18, Selenium Server 2.53.0 and Chrome Driver 2.21.2.
Basically, I take the approach described at https://github.com/RobK/nightwatchjs-drag-n-drop-example/blob/master/spec/drag-and-drop.js – i.e.: something like ...
.moveToElement('some-xpath-expression', 10, 10)
.pause(100)
.mouseButtonDown(0)
.pause(100)
.moveToElement('other-xpath-expression', 30, 30)
.pause(100)
.mouseButtonUp(0)
The cursor moves to the element to be dragged (perceivable by the :hover style of the icon the mouse is over), but then nothing happens. It looks to me like the mouseButtonDown() action has no effect. (But who knows for sure?)
It makes no difference if I use Firefox instead of Chrome – the behavior is exactly the same.
Any ideas?

Guys you have to try this and it works fine in Chrome, Firefox and IE.
Just you have to install "html-dnd" using npm, as well as this is a link: https://www.npmjs.com/package/html-dnd
After installing you just have to execute this command
browser.execute(dragAndDrop, ['#draggable', '#droppable']);
For Example:
var dragAndDrop = require('html-dnd').codeForSelectors;
browser.execute(dragAndDrop,['#elemendId1','#elemendId2']).pause(2000);
Hope this will work fine for your test cases.

The moment you click the element the expression changes and thus the tests 'forgets' what they were supposed to be clicking.
It's recommended to use an action build approach as so:
http://elementalselenium.com/tips/39-drag-and-drop

Currently at Nightwatch Version 1.5.1 I'm able to drag and drop with the following example.
Example:
"Step 1: Drag and Drop": function (browser) {
browser.moveToElement('yourLocator', '#startingElement', 0, 0);
browser.mouseButtonDown(0);
browser.moveToElement('yourLocator', '#endingElement', 0, 0);
browser.mouseButtonUp(0);
}

Related

Opening a new browser tab

I've tried several functions but none seems to be working? For example:
element, _ := webdriver.FindElement(selenium.ByCSSSelector, "body")
element.SendKeys(selenium.ControlKey + "t")
Selenium is capable of executing javascript within the browser.
To open a new tab get selenium to run the following:
window.open()
I've not used Selenium & Go before - so I can't comment on the syntax. However it's normally along the lines of driver.ExecuteScript("window.open()"). See if your IDE will help you plug the gap.
After you get a new tab, you typically need to use the .switchTo in order to move selenium to another tab.
updated:
Docs suggest....
// ExecuteScript executes a script.
ExecuteScript(script string, args []interface{}) (interface{}, error)
see here

Selenium works locally, but can't click on a link on travis

I have the exact same version of selenium (2.53.6) and firefox (43.0) on a local virtualbox with Ubuntu trusty, and a trusty image on travis.
The HTML code is trivial
<div>
<i class="fa fa-close fa-2x" aria-hidden="true"></i><br>Close<br>
</div>
The test code is trivial as well
def test_start_stop_container(self):
driver = self.driver
driver.get(self.base_url + "/hub/login")
driver.find_element_by_id("username_input").clear()
driver.find_element_by_id("username_input").send_keys("test")
driver.find_element_by_id("password_input").clear()
driver.find_element_by_id("password_input").send_keys("test")
driver.find_element_by_id("login_submit").click()
driver.find_element_by_name("action").click()
self.wait_for(lambda: "noVNC" == driver.title)
driver.find_element_by_xpath("//i").click() # << this here.
self.wait_for(lambda: "noVNC" != driver.title)
driver.find_element_by_name("action").click()
driver.find_element_by_xpath("//i").click()
driver.find_element_by_xpath("(//button[#name='action'])[2]").click()
self.wait_for(
lambda: "Start" == driver.find_element_by_name("action").text)
driver.find_element_by_id("logout").click()
In both cases I use Xvfb, but only on Travis the click is not working. No exception happens. It just seems like the operation is not performed. I recorded the session on Xvfb using some ffmpeg magic, and what I see is that the link highlights in blue (which is the hover color) but then the link is not clicked.
This video shows the exact operation (starts around 20 sec mark)
Does anybody have an idea of what the problem could be, or if there's something I can do to debug it?
Actually some time click() method of WebElement doesn't work as expected due to some designing issue of the element or other issues. So in this case, here is an alternate solution provided by selenium to execute piece of JavaScript to perform further events on the element.
So can use execute_script() instead to perform click here as below :-
driver.execute_script("arguments[0].click()", driver.find_element_by_link_text("Close"))
Try this xpath to identify the href - "//a[contains(text(),'Close')]"

Access window object / browser scope from protractor

I'm running tests with protractor, but it seems impossible to access the JS 'window' object. I even tried adding a tag in my html file that would contain something like
var a = window.location;
and then try expect(a) but I couldn't make it work, I always get undefined references...
How should I process to access variables that are in the browser scope ?
Assuming you are using a recent version of Protractor, let's say >= 1.1.0, hopefully >= 1.3.1
Attempting to access Browser side JS code directly from Protractor won't work because Protractor runs in NodeJS and every Browser side code is executed through Selenium JsonWireProtocol.
Without further detail, a working example:
browser.get('https://angularjs.org/');
One-liner promise that, as of today, resolves to '1.3.0-rc.3'
browser.executeScript('return window.angular.version.full;');
You can use it directly in an expect statement given Protractor's expect resolves promises for you:
expect(browser.executeScript('return window.angular.version.full;')).
toEqual('1.3.0-rc.3');
Longer example passing a function instead of a string plus without expect resolving the promise for you. i.e. for more control and for doing some fancy thing with the result.
browser.driver.executeScript(function() {
return window.angular.version.full;
}).then(function(result) {
console.log('NodeJS-side console log result: ' + result);
//=> NodeJS-side console log result: 1.3.0-rc.3
});

Coypu screenshot

On the end of a Scenario, I want to take a picture if it has failed. The following code does not work:
[AfterScenario]
public void AfterScenario()
{
if(ScenarioContext.Current.TestError != null)
{
WebBrowser.Driver.CaptureScreenShot(ScenarioContext.Current.ScenarioInfo.Title);
}
}
I think this may be due to the fact that I start my browser using Coypu (which has selenium wrapped). The driver does not have a 'captureScreenShot' method implemented. So my question is: how can i take a screenshot after a scenario, when i start up my browser using coypu?
The code for starting the browser is the following:
sessionConfiguration.Driver = typeof (SeleniumWebDriver);
sessionConfiguration.Browser = Drivers.Browser.Firefox;
As you say, this is not implemented in Coypu right now. Reason being I have simply never needed to take a screenshot since so far, and no one's asked till now.
To access the native driver (WebDriver in your case) use BrowserSession.Native then you can use WebDriver's GetScreenshot method. This would end up looking something like this (disclaimer: not tested):
var driver = (ITakesScreenshot) coypuBrowserSession.Native;
var screenshot = driver.GetScreenshot();
screenshot.SaveAsFile("c://screenshot.png", System.Drawing.Imaging.ImageFormat.Png);
I've opened an issue for you on github to have this added to Coypu's BrowserWindow API
This is now natively available in Coypu. You can find the documentation here:
https://github.com/featurist/coypu#screenshots

Selenium IDE: this.browserbot.getUserWindow().typeList.filter returns error on IE8

I have faced with following trouble during working with Selenium.
I need to verify that some value exists in list and I use the following code:
assertEval
this.browserbot.getUserWindow().typeList.filter(function(v) { return v[0] === 'Type_${r_suffix}'; })[0][0];
Type_${r_suffix}
This works file on Firefox, but on IE 8 returns error: Object doesn't support this property or method.
Could someone have an idea where is a problem?
As the MDN docs say, the filter() method is available only for IE9 and above.
Your're just using a too new technology. Filter it manually using a for loop or insert the code for Array.prototype.filter (from the MDN) to have access to it.