Harshit 7373/issue #3977

nightwatch/custom-assertions/elementHasCount.js

@@ -0,0 +1,45 @@
+/**
+ * A custom Nightwatch assertion. The assertion name is the filename.
+ *
+ * Example usage:
+ *   browser.assert.elementHasCount(selector, count)
+ *
+ * For more information on custom assertions see:
+ *   https://nightwatchjs.org/guide/extending-nightwatch/adding-custom-assertions.html
+ *
+ * @param {string} selector
+ * @param {number} count
+ */
+
+exports.assertion = function elementHasCount(selector, count) {
+  // Message to be displayed on the console while running this assertion.
+  this.message = `Testing if element <${selector}> has count: ${count}`;
+
+  // Expected value of the assertion, to be displayed in case of failure.
+  this.expected = count;
+
+  // Given the result value (from `this.value` below), this function will
+  // evaluate if the assertion has passed.
+  this.evaluate = function(value) {
+    return value === count;
+  };
+
+  // Retrieve the value from the result object we got after running the
+  // assertion command (defined below), which is to be evaluated against
+  // the value passed into the assertion as the second argument.
+  this.value = function(result) {
+    return result.value;
+  };
+
+  // Script to be executed in the browser to find the actual element count.
+  function elementCountScript(_selector) {
+    // eslint-disable-next-line
+    return document.querySelectorAll(_selector).length;
+  }
+
+  // The command to be executed by the assertion runner, to find the actual
+  // result. Nightwatch API is available as `this.api`.
+  this.command = function(callback) {
+    this.api.execute(elementCountScript, [selector], callback);
+  };
+};

nightwatch/custom-commands/angular/getElementsInList.js

@@ -0,0 +1,50 @@
+/**
+ * A class-based custom-command in Nightwatch. The command name is the filename.
+ *
+ * Usage:
+ *   browser.angular.getElementsInList(listName)
+ *
+ * See the example test using this object:
+ *   specs/with-custom-commands/angularTodo.js
+ *
+ * For more information on working with custom-commands see:
+ *   https://nightwatchjs.org/guide/extending-nightwatch/adding-custom-commands.html
+ *
+ * @param {string} listName Name of the list
+ * @param {function} cb Callback to be called with the result returned by the executed script
+ */
+
+module.exports = class AngularCommand {
+
+  async command(listName, cb = function(r) {return r}) {
+    // Script to be executed in the browser
+    const script = function(listName) {
+      // executed in the browser context
+      // eslint-disable-next-line
+      var elements = document.querySelectorAll('*[ng-repeat$="'+listName+'"]');
+
+      if (elements) {return elements}
+
+      return null;
+    };
+
+    // Arguments to be passed to the script function above
+    const args = [listName];
+
+    // Callback to be called when the script finishes its execution,
+    // with the result returned by the script passed as argument.
+    const callback = async function(result) {
+      const cbResult = await cb(result);
+
+      if (cbResult.value) {
+        return cbResult.value;
+      }
+
+      return cbResult;
+    };
+
+    // Execute the script defined above, along with arguments and
+    // the callback function.
+    return this.api.executeScript(script, args, callback);
+  }
+};

nightwatch/custom-commands/strictClick.js

@@ -0,0 +1,20 @@
+/**
+ * A non-class-based custom-command in Nightwatch. The command name is the filename.
+ *
+ * Usage:
+ *   browser.strictClick(selector)
+ *
+ * This command is not used yet used in any of the examples.
+ *
+ * For more information on working with custom-commands see:
+ *   https://nightwatchjs.org/guide/extending-nightwatch/adding-custom-commands.html
+ *
+ */
+
+module.exports = {
+  command: function(selector) {
+    return this
+      .waitForElementVisible(selector)
+      .click(selector);
+  }
+};

nightwatch/examples/accessibilty-tests/websiteAccessibility.js

@@ -0,0 +1,24 @@
+/**
+ * Rules the aXe uses:
+ * https://github.com/dequelabs/axe-core/blob/develop/doc/rule-descriptions.md
+ *
+ *
+ */
+
+describe('accessibilty tests for nightwatch website', function() {
+
+  before(async function() {
+    browser.navigateTo('https://nightwatchjs.org');
+    await browser.axeInject();
+  });
+
+  after(function() {
+    browser.end();
+  });
+
+  it('Nightwatch website page has accessible headers', function(browser) {
+    browser.axeRun('body', {
+      runOnly: ['empty-heading', 'page-has-heading-one', 'p-as-heading']
+    });
+  });
+});

nightwatch/examples/basic/duckDuckGo.js

@@ -0,0 +1,11 @@
+describe('duckduckgo example', function() {
+  it('Search Nightwatch.js and check results', function(browser) {
+    browser
+      .navigateTo('https://duckduckgo.com')
+      .waitForElementVisible('input[name=q]')
+      .sendKeys('input[name=q]', ['Nightwatch.js'])
+      .click('*[type="submit"]')
+      .assert.visible('#react-layout')
+      .assert.textContains('#react-layout', 'Nightwatch.js');
+  });
+});

nightwatch/examples/basic/ecosia.js

@@ -0,0 +1,16 @@
+describe('Ecosia.org Demo', function() {
+  before(browser => browser.navigateTo('https://www.ecosia.org/'));
+
+  it('Demo test ecosia.org', function(browser) {
+    browser
+      .waitForElementVisible('body')
+      .assert.titleContains('Ecosia')
+      .assert.visible('input[type=search]')
+      .setValue('input[type=search]', 'nightwatch')
+      .assert.visible('button[type=submit]')
+      .click('button[type=submit]')
+      .assert.textContains('.layout__content', 'Nightwatch.js');
+  });
+
+  after(browser => browser.end());
+});

nightwatch/examples/basic/todoList.js

@@ -0,0 +1,46 @@
+/**
+ * End-to-end test for the sample Vue3+Vite todo app located at
+ * https://github.com/nightwatchjs-community/todo-vue
+ */
+describe('To-Do List End-to-End Test', function() {
+
+  // using the new element() global utility in Nightwatch 2 to init elements
+  // before tests and use them later
+  const todoElement = element('#new-todo-input');
+  const addButtonEl = element('form button[type="submit"]');
+
+  it('should add a todo using global element()', async function() {
+    ///////////////////////////////////////////////////
+    // browser can now also be accessed as a global   |
+    ///////////////////////////////////////////////////
+
+    // adding a new task to the list
+    await browser
+      .navigateTo('https://todo-vue3-vite.netlify.app/')
+      .sendKeys(todoElement, 'what is nightwatch?')
+      .click(addButtonEl);
+
+    ///////////////////////////////////////////////////
+    // global expect is equivalent to browser.expect  |
+    ///////////////////////////////////////////////////
+
+    // verifying if there are 5 tasks in the list
+    await expect.elements('#todo-list ul li').count.toEqual(5);
+
+    // verifying if the 4th task if the one we have just added
+    const lastElementTask = element({
+      selector: '#todo-list ul li',
+      index: 4
+    });
+
+    await expect(lastElementTask).text.toContain('what is nightwatch?');
+
+    // find our task in the list and mark it as done
+    const inputElement = await lastElementTask.findElement('input[type="checkbox"]');
+    await browser.click(inputElement);
+
+    // verify if there are 3 tasks which are marked as done in the list
+    await expect.elements('#todo-list ul li input:checked').count.toEqual(3);
+  });
+
+});

nightwatch/examples/with-custom-assertions/todoList.js

@@ -0,0 +1,23 @@
+/**
+ * This example is a slight modification of the example already available at:
+ *   specs/basic/todoList.js
+ *
+ * This example demonstrate the use of custom-assertion defined at:
+ *   custom-assertions/elementHasCount.js
+ *
+ * For more information on working with custom-assertions, see:
+ *   https://nightwatchjs.org/guide/extending-nightwatch/adding-custom-assertions.html
+ *
+ */
+
+describe('To-Do List End-to-End Test', function() {
+  it('should add a new todo element', async function() {
+    // adding a new task to the list
+    await browser
+      .navigateTo('https://todo-vue3-vite.netlify.app/')
+      .assert.elementHasCount('#todo-list ul li', 4) // use of custom-assertion
+      .sendKeys('#new-todo-input', 'what is nightwatch?')
+      .click('form button[type="submit"]')
+      .assert.elementHasCount('#todo-list ul li', 5); // use of custom-assertion
+  });
+});

nightwatch/examples/with-custom-commands/angularTodo.js

@@ -0,0 +1,33 @@
+/**
+ * This example uses the custom-command defined at:
+ *   custom-commands/angular/getElementsInList.js
+ *
+ * For more information on working with custom-commands, see:
+ *   https://nightwatchjs.org/guide/extending-nightwatch/adding-custom-commands.html
+ *
+ */
+
+describe('angularjs homepage todo list', function() {
+  it('should add a todo using custom commands', async function(browser) {
+    // adding a new task to the list
+    const elements = await browser
+      .navigateTo('https://angularjs.org')
+      .sendKeys('[ng-model="todoList.todoText"]', 'what is nightwatch?')
+      .click('[value="add"]')
+      .angular.getElementsInList('todoList.todos'); // use of custom-command
+
+    const taskEl = element(elements[2]);
+
+    // verifying if the third task is the one we have just added
+    // browser.assert.textEquals(taskEl, 'what is nightwatch?');
+
+    await expect(taskEl).text.toEqual('what is nightwatch?');
+
+    // find our task in the list and mark it as done
+    const inputElement = await element(elements[2]).findElement('input');
+    await browser.click(inputElement);
+
+    // verify if there are 2 tasks which are marked as done in the list
+    await expect.elements('*[module=todoApp] li .done-true').count.to.equal(2);
+  });
+});

nightwatch/examples/with-page-objects/google.js

@@ -0,0 +1,32 @@
+/**
+ * This example uses the page-objects defined at:
+ *   page-objects/google/search.js
+ *   page-objects/google/searchResults.js
+ *
+ *  For more information on working with page objects, see:
+ *   https://nightwatchjs.org/guide/concepts/page-object-model.html
+ *
+ */
+
+describe('google search with consent form - page objects', function() {
+  const homePage = browser.page.google.search(); // first page-object
+
+  before(async () => homePage.navigate());
+
+  after(async (browser) => browser.quit());
+
+  it('should find nightwatch.js in results', function(browser) {
+    homePage.setValue('@searchBar', 'Nightwatch.js');
+    homePage.submit();
+
+    const resultsPage = browser.page.google.searchResults(); // second page-object
+    resultsPage.expect.element('@results').to.be.present;
+
+    resultsPage.expect.element('@results').text.to.contain('Nightwatch.js');
+
+    resultsPage.expect.section('@menu').to.be.visible;
+
+    const menuSection = resultsPage.section.menu;
+    menuSection.expect.element('@videos').to.be.visible;
+  });
+});

nightwatch/page-objects/google/search.js

@@ -0,0 +1,42 @@
+/**
+ * A Nightwatch page object. The page object name is the filename.
+ *
+ * Usage:
+ *   browser.page.google.search()
+ *
+ * See the example test using this object:
+ *   specs/with-page-objects/google.js
+ *
+ * For more information on working with page objects, see:
+ *   https://nightwatchjs.org/guide/concepts/page-object-model.html
+ *
+ */
+
+const searchCommands = {
+  submit() {
+    this.waitForElementVisible('@submitButton', 1000)
+      .click('@submitButton');
+
+    this.pause(1000);
+
+    return this; // for command-chaining
+  }
+};
+
+module.exports = {
+  url: 'https://google.no',
+
+  commands: [
+    searchCommands
+  ],
+
+  elements: {
+    searchBar: {
+      selector: 'textarea[name=q]'
+    },
+
+    submitButton: {
+      selector: 'input[value="Google Search"]'
+    }
+  }
+};