Add new examples for v3 element API. (#4274)

Co-authored-by: Priyansh Garg <[email protected]>

examples/tests/element/dragAndDrop.js

@@ -0,0 +1,35 @@
+describe('Element Drag & Drop Demo', function () {
+  before(browser => {
+    browser.navigateTo(
+      'https://mdn.github.io/dom-examples/drag-and-drop/copy-move-DataTransfer.html'
+    );
+  });
+
+  it('move element demo', async function (browser) {
+    const srcMoveElem = browser.element('#src_move'); // returns a Nightwatch Element Wrapper with loads of element commands.
+
+    // pause to see the initial state
+    browser.pause(1000);
+
+    // drag src element 80 pixels below.
+    srcMoveElem.dragAndDrop({x: 0, y: 80});
+  });
+
+  it('copy element demo', async function (browser) {
+    const srcCopyElem = browser.element('#src_copy'); // returns a Nightwatch Element Wrapper with loads of element commands.
+    const destCopyWebElem = await browser.element('#dest_copy'); // awaiting the browser.element command returns a WebElement object (actual result).
+
+    // pause to see the initial state
+    browser.pause(1000);
+
+    // drag src element to dest element.
+    srcCopyElem.dragAndDrop(destCopyWebElem);
+  });
+
+  after((browser) => {
+    // pause to see the final state
+    browser.pause(2000);
+
+    browser.end();
+  });
+});

examples/tests/element/elementScreenshot.js

@@ -0,0 +1,30 @@
+describe('Take Screenshot Demo', function () {
+  before((browser) => {
+    browser.navigateTo('https://nightwatchjs.org/');
+  });
+
+  it('takes screenshot without async-await', function (browser) {
+    browser.waitForElementVisible('body');
+
+    const heading = browser.element('.hero__heading');
+    const screenshot = heading.takeScreenshot();
+    screenshot.then((screenshotData) => {
+      require('fs').writeFile('heading.png', screenshotData, 'base64', (err) => {
+        browser.assert.strictEqual(err, null);
+      });
+    });
+  });
+
+  it('takes screenshot with async-await', async function (browser) {
+    browser.waitForElementVisible('body');
+
+    const heading = browser.element('.hero__heading');
+    const screenshotData = await heading.takeScreenshot();
+
+    require('fs').writeFile('heading1.png', screenshotData, 'base64', (err) => {
+      browser.assert.strictEqual(err, null);
+    });
+  });
+
+  after((browser) => browser.end());
+});

examples/tests/element/isCommands.js

@@ -0,0 +1,35 @@
+describe('Element "is" commands Demo', function () {
+  before((browser) => {
+    browser.navigateTo('https://www.ecosia.org/settings');
+  });
+
+  it('Demo', async function (browser) {
+    // accepting cookies to remove modal
+    browser.element('.cookie-consent__actions').getLastElementChild().click();
+
+    const saveButton = browser.element('.settings-form__buttons > .base-button--variant-solid-green');
+    const cancelButton = browser.element('.settings-form__buttons > .base-button--variant-outline');
+
+    saveButton.isVisible().assert.equals(true);
+    cancelButton.isVisible().assert.equals(true);
+
+    saveButton.isEnabled().assert.equals(false);
+    cancelButton.isEnabled().assert.equals(true);
+
+    const newTabCheckbox = browser.element('#e-field-newTab');
+
+    newTabCheckbox.isSelected().assert.equals(false);
+
+    // Clicking the checkbox selects it.
+    // Also our save button becomes enabled.
+    newTabCheckbox.click();
+
+    newTabCheckbox.isSelected().assert.equals(true);
+    saveButton.isEnabled().assert.equals(true);
+
+    // click the cancel button
+    cancelButton.click();
+  });
+
+  after((browser) => browser.end());
+});