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

The validation of pre-filled input fields in Angular Material dialogs is not working as expected

I am encountering an issue with a mat-dialog that opens through an edit button within a (mat-)table. Upon opening the dialog, data is passed to populate certain input fields. One of these inputs has validation requiring that it cannot be left empty. The ...

Opening the media library in Wordpress through the Angular JS function triggered by an ng-click event

I have been working on a plugin where I need to select an image from the media library. However, despite having implemented the code correctly to call the media library window, I encounter an issue. When I click the button to select an image, nothing happe ...

Typescript: Verifying the type of an interface

In my code, I have a function called getUniqueId that can handle two different types of interfaces: ReadOnlyInfo and EditInfo. Depending on the type passed to this function, it will return a uniqueId from either interface: interface ReadOnlyInfo { item ...

Having trouble with uploading an image in Laravel using a modal?

For my laravel inventory system, I am facing an issue with uploading images for products. The old code I used for image upload is not working in my current project where I am utilizing a modal and ajax request to save inputs in the database. Can anyone pro ...

manipulating child element's innerHTML with javascript

Is there a way to change my icon from expand_more to expand_less in the code below? <li class="dropdown-bt" onclick="dropdown('content');"> <a>dropdown-content <i class="material-icons">expand_more</i></a> </ ...

The browser encountered an issue trying to load a resource from a directory with multiple nested levels

I've stumbled upon an unusual issue. Here is a snapshot from the inspector tools. The browser is unable to load certain resources even though they do exist. When I try to access the URL in another tab, the resource loads successfully. URLs in the i ...

Stop automatic form submissions from the enter key

My live chat messaging system is experiencing an issue where the page refreshes every time a user presses the enter button. I attempted to use prevent default code, but it did not work for me. I'm new to website programming, so if there are any proble ...

What is the procedure for utilizing Javascript to redirect a user on a website back to the login page if necessary?

Is there a way to redirect a website user back to the login page if they try to access a secure page without logging in first? I'm looking to implement this using JavaScript and cookies. Any suggestions or ideas on how to achieve this seamlessly for t ...

Access the elements within arrays without using the square brackets

I am trying to access data from a list, but I am having trouble using square brackets []. The getTalonPaie function calls the get method from the HttpClient service and returns an observable with multiple values. However, when I try to store these values i ...

Displaying individual attributes of objects through v-for loop

I have created a table-making component to streamline the process of creating multiple tables. Each table consists of three key elements: The object (an array of objects with one row per object) Headers specific to each table The object properties that n ...

Combining multiple Float32Arrays to create a single Float32Array

I need help creating a function that can flatten multiple Float32Arrays into one large Float32Array const first = new Float32Array([1,2]); const second = new Float32Array([3,4,5]); const third = new Float32Array([6,7,8,9]); const chunks = [ ...

Insert information into an array within a mongoDB structure using the Mongoose library

Is it possible to add elements into an array in a mongoDB schema? For instance, in the given schema: var ProviderSchema = new Schema({ keyWords: [String] }); How can I insert data into the keyWords field using the specified route: app.put(&a ...

Generating a safe POST connection with express.js

Is there a simple method to generate a link for submitting a POST request using Express.js or a plugin? This approach can also be employed to enhance security for important actions like user deletion, including CSRF protection. In some PHP frameworks lik ...

Unlocking JSON data with identical keys using JavaScriptLearn how to access JSON data with

I need help converting my JSON training data that includes classes and sentences into a different format. [ { class: 'Reservation', sentence: 'make reservation' }, { class: 'Reservation', sentence: 'do reservation&a ...

Use two separate AJAX requests to open and close the modal dialog

I am experiencing an issue with my subscription form that uses modal windows. After closing the window and trying to subscribe again, the ajax calls are being duplicated, resulting in an error. $("#openModal").click(function() { if($("#wname").val() = ...

JQuery submit event not triggering object setting

I'm looking to gather input values from a form and store them in an object for an offer. After trying the following code on submit: $(document).ready(function(){ $('#formOffre').on('submit', function(e) { e.preventDefault ...

What could be the reason for the appearance of this error message: 'Illegal arguments: undefined, string'?

Currently, I am in the process of developing a node.js application where I have created a backend API specifically for user registration. However, when testing it using Postman, I encountered an error message stating 'Illegal arguments: undefined, str ...

Is it necessary for the scope to be separated?

In the document object model (DOM), I have two straightforward directives that are responsible for creating similar elements. Both directives have an isolated scope. Each directive has an ng-click attribute that calls a method to display a message. One d ...

How can I make an HTML button the default option within a form?

Currently, I am working on an asp.net page which contains a mix of asp.net buttons and HTML input[type=button] elements. These HTML buttons are specifically used to initiate AJAX calls. My dilemma arises when the user hits ENTER - instead of defaulting to ...

What is the best way to separate a table column into a distinct column at the specified delimiter count?

I successfully wrote code that splits the third column into new columns at the slash delimiter. However, I am struggling to modify it to split at the nth (i.e. 2nd) occurrence. I couldn't find a solution online, so I'm reaching out here for help ...