Is it normal for the protractor cucumber tests to pass without observing any browser interactions taking place?

Having recently started using protractor cucumber, I have created the following feature. Upon launching protractor protractor.conf.js, the browser opens and immediately closes, displaying that my tests have passed. Is this the expected testing behavior? Shouldn't I see interactions in the browser during the login process?

Scenario: Open the browser and login
    Given I am on the login page
    When I should be able to login with my credentials
    When I logout
    Then I should be able to see login page

Scenario: Open the browser and login

√ Given I am on the login page
√ When I should be able to login with my credentials
√ When I logout
√ Then I should be able to see login page

login page

1 scenario (1 passed) 4 steps (4 passed) 0m00.005s

this.Given('I am on the login page', function() {

   browser.driver.get(browser.baseUrl);
});

this.When('I should be able to login with my credentials',  function() {
    let inputUsernameField = element(by.css(USERNAME_NAME));
    inputUsernameField.sendKeys(username);
    let inputPasswordField = element(by.css(PASSWORD_NAME));
    inputPasswordField.sendKeys(password);
    element(by.id(LOGIN_BUTTON_ID)).click();
});

this.When('I logout',  function() {

    element(by.className(HAMBERBURGER_MENU_ICON_CLASS)).click();
    element(by.className(LOGOUT_BUTTON_CLASS)).click();
});

this.Then('I should be able to see login page', {timeout:120*1000},function() {

    browser.driver.wait(protractor.ExpectedConditions.presenceOf($('#login_button')), 5000);
});

Below is the protractor.conf.js

exports.config = {
  seleniumAddress: 'http://localhost:4444/wd/hub',
  getPageTimeout: 600000,
  allScriptsTimeout: 500000,
  defaultTimeoutInterval: 30000,
  framework: 'custom',
  // path relative to the current config file
  frameworkPath: require.resolve('protractor-cucumber-framework'),
  multiCapabilities:
  [
  {
    'browserName': 'chrome'
  },
  {
    'browserName': 'firefox'
  }],

  // Spec patterns are relative to this directory.
  specs: [
    'features/*.feature'
  ],
  baseURL: 'http://localhost:8080/',
  ignoreSynchronization: true,
  cucumberOpts: {
    strict: true,
    require: [
              'hooks/reporter/js',
              'specs/*Spec.js'
            ],
    tags: false,
    profile: false,
    format: 'json:e2e/reports/cucumber-report.json',
    resultJsonOutputFile: 'e2e/reports/cucumber-report.json'
  },

  onPrepare: function() {

    var chai = require('chai');
    chai.use(require('chai-as-promised'));
    global.expect = chai.expect;
    global.baseURL = this.baseURL;
    browser.ignoreSynchronization = true;
    browser.driver.manage().window().maximize();
    browser.waitForAngular();           
    browser.driver.manage().timeouts().implicitlyWait(30000);  
  },

  onComplete: function() {

    const report = require('multiple-cucumber-html-reporter');

    report.generate({
        jsonDir: 'e2e/reports/',
        reportPath: 'e2e/reports/',

    });
  }
}

Answer №1

After some exploration, it seems that using async and await is necessary when no callback function is being passed in. This pertains to Javascript syntax, not Typescript.

this.Given('I am on the login page', function() {

   browser.driver.get(browser.baseUrl);
});

    this.Then('I should be able to see login page', {timeout:120*1000},function() {

    browser.driver.wait(protractor.ExpectedConditions.presenceOf($('#login_button')), 5000);
});

Updated with async/await

this.Given('I am on the login page', async() => {

   await browser.driver.get(browser.baseUrl);
});

this.Then('I should be able to see login page', {timeout:120*1000}, async() => {

    await browser.driver.wait(protractor.ExpectedConditions.presenceOf($('#login_button')), 5000);
});

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Error: The value is null and cannot be read

My external application is set up within a const called setupRemote, where it starts with the appConfig in the variable allowAppInstance. export const setupRemote = () => { if (isRemoteAvailable) { try { ... const allowAppInstance = S ...

Looking to optimize the JavaScript code for improved performance speed

Is there a more efficient way to avoid writing the same lines of code repeatedly without compromising performance? I've attempted using a for loop to categorize fields as 'mandatory' or 'optional', but it still requires duplicating ...

In JavaScript, the input box is set to automatically capitalize the first letter, but users have the ability

How can I automatically capitalize the first letter of a user's name input, but allow for overrides like in the case of names such as "de Salis"? I've read on Stack Overflow that CSS alone cannot achieve this with text-transform:capitalize;, so ...

Optimizing Midnight UTC+0 Setting in JavaScript Date Functions

I am using an MUI Datepicker that allows me to choose a day without specifying the time. For example, if I select 01.09.1970, in the console log it displays as Tue Sep 01 1970 00:00:00 GMT+0100 (Central European Standard Time). This indicates that even tho ...

Unable to modify the appearance of an HTML element when injected via a Chrome extension

I am currently developing a unique chrome extension that uses Ajax to inject custom HTML into the current tab. This extension appends a <div> element to the body, and now I need to manipulate it using JavaScript. Specifically, I want it to dynamical ...

Is the current version of NPM React-router too cutting-edge for your needs

When I use the command npm -v react-router on my React app, it shows version 6.9.0. However, when I check the npmjs page for react-router, the latest version available is 5.0.1. How can this discrepancy be explained? ...

Three pie or doughnut charts instead of one are utilized within Chart.js

Can multiple charts be nested inside one another? To see an example of a single chart and what I would like - where the first one is placed inside the second one and so on - please refer to this js fiddle. var data = [ { label: "title 1", value: ...

Exploring React-Query's Search Feature

Looking for guidance on optimizing my Product search implementation using react-query. The current solution is functional but could be streamlined. Any suggestions on simplifying this with react-query would be greatly appreciated. import { useEffect, use ...

Tips for stopping the submission of a form

My current form includes ajax calls: <form method="post" action="?slt=Sbmt" onsubmit="return validateForm()" id="reportform" enctype="multipart/form-data"> <div id="evaluation1"> <h2>Rate Technical Skills</h2> <table class= ...

Is there a way for me to store the retrieved information from an API into a global variable using Node.js?

function request2API(option){ const XMLHttpRequest = require('xhr2');//Cargar módulo para solicitudes xhr2 const request = new XMLHttpRequest(); request.open('GET', urlStart + ChList[option].videosList + keyPrefix + key); request. ...

Implement a dropdown menu for filtering, but it is currently not functioning as expected

When I select a city_name, my goal is for the graph to only display information pertaining to that particular city. In the params section of my code, I have included filtering options using a selection menu in Vega-Lite. However, despite selecting Brisba ...

Generate an array that can be accessed across all components

As someone new to reactjs, I'm trying to figure out how to handle an array of objects so that it can be global and accessed from multiple components. Should I create another class and import it for this purpose? In Angular, I would typically create a ...

Designs for an HTML5 Cheeseburger navigation interface

I've been struggling to implement a functional and visually appealing hamburger menu on my website. The challenge lies in integrating the menu seamlessly into the page rather than having it just pop up abruptly. Despite trying various webkit tools, I ...

jQuery if statement appears to be malfunctioning

When the condition operates alone, everything works fine. However, when I introduce an 'and' operation, it does not function correctly. If only one of them is true, the code works. It also successfully takes input values. <!DOCTYPE HTML Code ...

find all the possible combinations of elements from multiple arrays

I have a set of N arrays that contain objects with the same keys. arr[ {values:val1,names:someName},   {values:val2,names:otherName}, ] arr2[   {values:valx,names:someNamex}, {values:valy,names:otherNamey}, ] My goal is to combine all possible c ...

What is the meaning of "bootstrapping" as it relates to Angular 2?

I found a question that is similar to mine, but I think my case (with version 2) has enough differences to warrant a new discussion. I'm curious about the specific purpose of calling bootstrap() in an Angular 2 application. Can someone explain it to ...

Using Selectpicker with Jquery .on('change') results in the change event being triggered twice in a row

While utilizing bootstrap-select selectpicker for <select> lists, I am encountering an issue where the on change event is being triggered twice. Here is an example of my select list: <select class="form-control selectpicker label-picker" ...

What is the connection between serialization and JSON?

Can you explain serialization? Serialization is the process of converting an object into a stream of bytes, allowing it to be sent over a network or stored in a file. This allows the object to be reconstructed later on. What exactly is JSON? JSON stands ...

Getting the text from an HTML input field requires accessing the value property of the

My goal is to generate a pdf report using php. The user will enter their name in an input box, which will then be passed to the second php page that searches the mysql database. Issue: When the user inputs their name, attempting to retrieve the data (var ...

Automatically updating client-side values in AngularJS using setInterval()

Implementing a value calculator on the client side using AngularJS. I need to update the main value of the calculator every 5 minutes with setInterval(). This is my AngularJS code: $http({method: 'GET', url: '../assets/sources.json'} ...