Having trouble implementing the page object model with cucumber.js: bug detected!

I have been working on implementing a page object pattern in my cucumber.js test automation suite with selenium webdriver. However, I am facing an error when trying to call the page object from my test step. The folder structure I am using is as follows:

features
|__pages - login_page.js
|__steps - login_steps.js
|__support - world.js

The feature file looks like this:

Feature File

Scenario: Login 
Given I browse to the login page
When I enter the username "test" and password "test"
Then I should be logged in successfully

This is how my login page is structured:

'use strict';

exports.login = function () {
   this.driver.get('https://www.example.com/login');
   this.driver.findElement({ id: 'username' }).sendKeys('my username');
   this.driver.findElement({ id: 'password' }).sendKeys('my password');
   this.driver.findElement({ id: 'btn-login'}).click();
};

And here is my steps definition file:

'use strict';

var expect = require('chai').expect;
var loginpage = require('../pages/LoginPage');


module.exports = function() {
   this.World = require('../support/world.js').World;

   this.Given(/^I enter the username "(.*)", and password (.*)"$/, function (username, password) {
//call page object
    loginpage.login();

    });


};

However, when running the test, I encounter the following error message:

TypeError: Cannot read property 'get' of undefined
      at Object.exports.login (/Users/Gerry/cuke/features/pages/LoginPage.js:9:16)

This error points to the line: this.driver.get('https://www.example.com/login');

The steps within the login function work fine if directly inserted into the steps without calling the page object.

Any suggestions or ideas on what could be going wrong here?

Answer №1

After some troubleshooting, I managed to solve the issue at hand. The main problem was that the context of 'this' in the steps did not align with the context in the page object. To resolve this, I had to pass the current context of 'this' into the page function. Here's how my updated steps now appear:

'use strict';

var expect = require('chai').expect;
var loginpage = require('../../pages/LoginPage');
var World = require('../support/world.js').World;

module.exports = function() {
  this.World = World;
  this.Given(/^I enter the following login credentials "(.*)", and " (.*)"$/, function (username, password) {

    // We need to pass the current context of `this` so we can access
    // the driver in the page function
    loginpage.login(this, username, password);
});

As for the login page function, it has been updated as follows:

'use strict';
exports.login = function (context, username, password) {
   context.driver.get('https://www.getturnstyle.com/login');
   context.driver.findElement({ id: 'username' }).sendKeys(username);
   context.driver.findElement({ id: 'password' }).sendKeys(password);
   context.driver.findElement({ id: 'btn-login'}).click();
};

module.exports = exports;

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

Mastering the Control of "Run Flash Allow/Block" with Python Selenium

I am trying to figure out how to click "Allow" using Python selenium. Any suggestions on how I can accomplish this? ...

What could be causing my JavaScript function to produce repeated letters with just one key press?

After implementing a code that generates different variables based on the 'truth' variable, I encountered an issue. Everything works flawlessly when 'truth' is set to "name," but as soon as I switch it to "email," any keystroke results ...

Angularjs: a powerful tool for passing data efficiently between controllers

In my angular.js application, I have implemented multiple views and I am in need of maintaining the status across view changes. To achieve this, I have created a simple factory to share data between controllers. Instead of using "$scope" in the controllers ...

Guide to inputting text into the Dev element

I am encountering a challenge with automating gist creation on GitHub. The issue arises when trying to input text into the gist content-box (see attached image). Despite attempting to use Javascript executer, I have not been successful. JavascriptExecutor ...

Running a selenium test with a stand-alone connection to chrome.exe

After encountering issues with Chrome 44, as discussed in this Stack Overflow thread, I followed RobW's suggestion to use a standalone chrome.exe with the required version. However, I am now unsure of how to integrate it with my Selenium and Java test ...

Is there a way to use Ajax to analyze and contrast information from two separate web links?

I am looking to compare and display the genre_ids from the first link and the id from the second link. Example: genre_ids: [ 18, 878, ] { id: 18, name: "Drama", }, { id: 878, name: "Science Fiction", } Result: Drama, Science Fiction $(document).ready( ...

What is the process for combining and compressing an Angular 2 application?

I am currently trying to concatenate and minify an angular2 application. My approach so far involved concatenating all my *.js files (boot.js, application.js then all components) into one file and injecting it into my index.html. I also removed the <s ...

What is the best way to incorporate a unique font with special effects on a website?

Is there a way to achieve an Outer Glow effect for a non-standard font like Titillium on a website, even if not everyone has the font installed on their computer? I'm open to using Javascript (including jQuery) and CSS3 to achieve this effect. Any sug ...

Unable to retrieve hours from MongoDB date array

Whenever I fetch data from my NodeJS+MongoDB webservice, I am able to retrieve the date format successfully. However, I am facing an issue when trying to extract hours from it. Here is how the date looks in MongoDB: https://i.stack.imgur.com/qxWGL.png I ...

Troubles arising while submitting data from AngularJS to Amazon S3

I am currently in the process of developing an application using the MEAN (MongoDB, Express, AngularJS, node.js) stack where I need to upload image files to Amazon S3. Here is my approach: Initially, an http get request is sent to my API which outlines th ...

Pinterest's "Pin it" button causing issues with the 'back' function in Internet Explorer

Recently, I discovered a problem with the "Pin it" button for Pinterest in Internet Explorer (v9 at least). It seems that this button is causing issues with the 'back' functionality in the browser. When right-clicking on it, an entry like '& ...

Transfer all image files from Node.js to the frontend

What is the best way to send all image files from my backend nodejs server folder to my Reactjs client? I have set up a website where users can sign in and upload their files. However, I am facing an issue where only one file is visible on the client side, ...

What is the process for incorporating Material-UI into a JSFiddle project?

I'm having trouble figuring out how to load and use the Material UI script on platforms like JSFiddle or SO's code editor, even though I can add it with NPM. Check out this JSFiddle example <script src="https://unpkg.com/@material-ui/core/um ...

What could be causing my button to not capture the value of this input text field?

After clicking the button, I am trying to log the value of the input text field in the console. However, it just shows up as blank. Despite checking my code multiple times, I can't seem to figure out why. Any insights would be greatly appreciated! &l ...

Unable to input text using Python Selenium in a textbox

Currently, I am attempting to input text into a specific textarea HTML element using Python Selenium: <div class="spk-c spH-d"><div id="gwt-uid-23" class="sppb-a"> <div class="sppb-b spk-b">For example, flowers or used cars</div> & ...

Do AJAX requests make Cross-site scripting attacks more significant?

Currently, I am in the process of developing a React application that utilizes a PHP (Codeigniter) backend. Despite Codeigniter not handling this issue automatically, I have taken it upon myself to delve into the matter. While I comprehend the importance ...

I'm struggling to understand the folder arrangement and the system is telling me it can't locate my file

I'm having trouble identifying what might be causing issues with my file structure. Currently, I am using Aurelia for the front end and node for the server. I attempted a fix by performing a join operation, which resolved some of the problems. However ...

Edit CSS attributes within Angular 2+ framework

When using jQuery, we have the ability to do the following: JQuery('.someStyle') .css({"background", "red"}) This allows us to directly change the CSS property in style. While working with Angular 2+, we can use [style.<property>] for ...

The final child element is null when using lastElementChild

For my current Javascript project, I am tackling the task of dividing the page into two separate div elements. The left div is populated with randomly positioned images, and then I utilized the .cloneNode() method to duplicate this on the right side, exclu ...

Differentiate among comparable values through placement regex

I'm currently tackling a challenge involving regex as I work on breaking down shorthand CSS code for the font property. Here is my progress thus far: var style = decl.val.match(/\s*(?:\s*(normal|italic|oblique)){1}/i); style = style ? style ...