Allows the usage of XPath selectors to target elements

[sunyatasattva]

I have added an optional parameter useXPath which, if true, allows for XPath selectors to be passed to the the drag and drop function, for those cases in which CSS selectors just don't cut it.

[sunyatasattva]

Tests apparently fail on IE, I suppose that IE still doesn't support XPath. I don't know if you are comfortable with it, but we could add a shim: https://github.com/google/wicked-good-xpath

It is not important for my use case, but I assume if we put this feature, we should also add this.

[Kuniwak]

It makes sense.

But I think we should export a new API such as .codeForXPaths.
Because .codeForSelectors is a short form of Code for (CSS) Selectors.

Could you split codes for XPaths to the new API?

[sunyatasattva]

Sure, will do that within the next 24 hours :)

[sunyatasattva]

I separated the API. However I couldn't get wgxpath to work, am not familiar with TypeScript.

[Kuniwak]

I think this test case should split to another file.

In my understanding, the official document of Nightwatch.js said that we should call browser.end() only once on a file:

Remember always to call the .end() method when you want to close your test, in order for the Selenium session to be properly closed.

http://nightwatchjs.org/guide#writing-tests

But browser.end() is unexpectedly called twice in the file.
So It will cause a test failure like:

Running:  Drag and Drop with Nightwatch using CSS selectors
 ✔ Testing if element <#result> contains text: "NG".
 ✔ Testing if element <#result> contains text: "OK".
No assertions ran.

Running:  Drag and Drop with Nightwatch using XPath
 ✖ Testing if element <#result> contains text: "NG". Element could not be located.  - expected "NG" but got: null

[Kuniwak]

I separated the API.

Thank you! 😄

However I couldn't get wgxpath to work, am not familiar with TypeScript.

I think a polyfill of document.evaluate is not in the purpose of html-dnd.
This polyfill should be injected to test targets by user's hands.
But we can tell how to use the polyfill with html-dnd on README.md.

[Kuniwak]

I confirmed that following steps can make test pass on IE9:

1. Add wgxpath.install.js to the repository as a test asset
2. Add useXPathPolifill (see below) and execute it.

diff --git a/test/e2e/selenium-webdriver/index.js b/test/e2e/selenium-webdriver/index.js
index c4705fa..be464be 100755
--- a/test/e2e/selenium-webdriver/index.js
+++ b/test/e2e/selenium-webdriver/index.js
@@ -116,6 +116,8 @@ describe('html-dnd', function() {
         it('should can drag and drop', function() {
           driver.get(TEST_PAGE_URL);

+          useXPathPolyfill(driver);
+
           return webdriver.promise
             .all([
               driver.executeScript(
@@ -138,3 +140,13 @@ describe('html-dnd', function() {
     });
   });
 });
+
+
+var Fs = require('fs');
+var Path = require('path');
+
+function useXPathPolyfill(driver) {
+  var WGXPATH_INSTALLER_PATH = Path.resolve(__dirname, '../asset/wgxpath.install.v1.3.0.js');
+  driver.executeScript(Fs.readFileSync(WGXPATH_INSTALLER_PATH, 'utf8'));
+  driver.executeScript('wgxpath.install();');
+}

[sunyatasattva]

Alright! I had also thought of the possibility of letting the user polyfill when required by his project, but then I thought maybe html-dnd wanted to be an all-in-one solution.

Ok then, will update the PR between today and tomorrow.

[sunyatasattva]

All checks have passed! 🎉

[Kuniwak]

LGTM 👍

[Kuniwak]

Thank you @sunyatasattva 🙏

[sunyatasattva]

お疲れ様でした @Kuniwak 🙇