Implemented right click for WebDriver, Nightmare

docs/webapi/rightClick.mustache

@@ -1,3 +1,13 @@
-Performs right click on an element matched by CSS or XPath.
+Performs right click on a clickable element matched by semantic locator, CSS or XPath.
 
-@param locator element located by CSS|XPath|strict locator.
+```js
+// right click element with id el
+I.rightClick('#el');
+// right click link or button with text "Click me"
+I.rightClick('Click me');
+// right click button with text "Click me" inside .context
+I.rightClick('Click me', '.context');
+```
+
+@param locator clickable element located by CSS|XPath|strict locator.
+@param context (optional) element located by CSS|XPath|strict locator.

lib/helper/Nightmare.js

@@ -604,6 +604,18 @@ class Nightmare extends Helper {
       .wait(this.options.waitForAction);
   }
 
+
+  /**
+   * {{> ../webapi/rightClick }}
+   */
+  async rightClick(locator, context = null) {
+    const el = await findClickable.call(this, locator, context);
+    assertElementExists(el, locator, 'Clickable');
+    return this.browser.evaluate(el => window.codeceptjs.rightClickEl(el), el)
+      .wait(this.options.waitForAction);
+  }
+
+
   /**
    * {{> ../webapi/moveCursorTo }}
    */

lib/helper/Protractor.js

@@ -473,10 +473,13 @@ class Protractor extends Helper {
     if (locator === undefined) {
       return this.browser.actions().click(Button.RIGHT).perform();
     }
-
-    const els = await this._locate(locator, true);
-    assertElementExists(els);
-    const el = els[0];
+    let matcher = this.browser;
+    if (context) {
+      const els = await this._locate(context, true);
+      assertElementExists(els, context);
+      matcher = els[0];
+    }
+    const el = await findClickable.call(this, matcher, locator);
 
     await this.browser.actions().mouseMove(el).perform();
     return this.browser.actions().click(Button.RIGHT).perform();

lib/helper/WebDriver.js

@@ -643,19 +643,28 @@ class WebDriver extends Helper {
    *
    * * *Appium*: supported, but in apps works as usual click
    */
-  async rightClick(locator) {
-    // just press button if no selector is given
-    if (locator === undefined) {
-      return this.browser.buttonDown('right');
+  async rightClick(locator, context) {
+    const locateFn = prepareLocateFn.call(this, context);
+
+    const res = await findClickable.call(this, locator, locateFn);
+    if (context) {
+      assertElementExists(res, locator, 'Clickable element', `was not found inside element ${new Locator(context)}`);
+    } else {
+      assertElementExists(res, locator, 'Clickable element');
     }
 
-    const res = await this._locate(locator, true);
-    assertElementExists(res, locator, 'Clickable element');
-    const elem = usingFirstElement(res);
-    const elementId = getElementId(elem);
-    if (this.browser.isMobile) return this.browser.touchClick(elementId);
-    await this.browser.moveTo(elementId);
-    this.browser.buttonDown('right');
+    const el = usingFirstElement(res);
+
+    await el.moveTo();
+
+    if (this.browser.isW3C) {
+      // W3C version
+      return this.browser.performActions([
+        { type: 'pointerDown', button: 2 },
+      ]);
+    }
+    // JSON Wire version
+    await this.browser.buttonDown(2);
   }
 
   /**
@@ -2262,9 +2271,9 @@ function prepareLocateFn(context) {
   return (l) => {
     l = new Locator(l, 'css');
     if (el) return this.browser.findElementsFromElement(el, l.type, l.value);
-    return this._locate(context, true).then((res) => {
+    return this._locate(context, true).then(async (res) => {
       assertElementExists(res, context, 'Context element');
-      return this.browser.findElementsFromElement(el = getElementId(res[0]), l.type, l.value);
+      return res[0].$$(l.simplify());
     });
   };
 }

lib/helper/clientscripts/nightmare.js

@@ -118,6 +118,18 @@ if (!window.codeceptjs) {
     this.fetchElement(el).dispatchEvent(event);
   };
 
+
+  codeceptjs.rightClickEl = function (el) {
+    const event = new MouseEvent('contextmenu', {
+      bubbles: true,
+      cancelable: true,
+      view: window,
+      buttons: 2,
+    });
+
+    this.fetchElement(el).dispatchEvent(event);
+  };
+
   codeceptjs.checkEl = function (el) {
     const element = this.fetchElement(el);
     const event = document.createEvent('HTMLEvents');

test/data/app/view/form/rightclick.php

@@ -0,0 +1,24 @@
+<html>
+<head>
+<script>
+function printContext() {
+  document.getElementById('output').innerHTML = 'right clicked';
+}
+</script>
+</head>
+<body>
+
+<p class="context">
+<a oncontextmenu="javascript:printContext();return false;">
+    Lorem Ipsum
+</a>
+</p>
+
+<div id="output">
+</div>
+
+
+
+
+</body>
+</html>

test/helper/webapi.js

@@ -225,6 +225,30 @@ module.exports.tests = function () {
     });
   });
 
+  describe('#rightClick', () => {
+    it('it should rightClick', function* () {
+      yield I.amOnPage('/form/rightclick');
+      yield I.dontSee('right clicked');
+      yield I.rightClick('Lorem Ipsum');
+      return I.see('right clicked');
+    });
+
+    it('it should rightClick by locator', function* () {
+      yield I.amOnPage('/form/rightclick');
+      yield I.dontSee('right clicked');
+      yield I.rightClick('.context a');
+      return I.see('right clicked');
+    });
+
+    it('it should rightClick by locator and context', function* () {
+      yield I.amOnPage('/form/rightclick');
+      yield I.dontSee('right clicked');
+      yield I.rightClick('Lorem Ipsum', '.context');
+      return I.see('right clicked');
+    });
+  });
+
+
   describe('#checkOption', () => {
     it('should check option by css', function* () {
       yield I.amOnPage('/form/checkbox');