Protractor: Unable to reach variables within closure set in the parent function

I have a code snippet in one of my JS files that looks like this:

// test/lib/UserHelper.js

'use strict';
var Firebase = require('firebase');

exports.createUser = function (email, password) {
  browser.executeAsyncScript(function (done) {
    var $firebaseSimpleLogin = angular.inject(['ng', 'firebase']).get('$firebaseSimpleLoging');
    var firebaseRef = new Firebase('https://urltoapplication.firebaseio.com');
    var auth = $firebaseSimpleLogin(firebaseRef);

    auth.$createUser(email, password);

    done();
  });
};

When I try to call it within my test as shown below:

// test/settings/company.spec.js

'use strict';
var user = require('../lib/UserHelper');

describe('company specs', function () {

  beforeEach(function () {
    user.createUser('<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="dbafbea8af9bafbea8aff5b8b4b6">[email protected]</a>', 'test');
  });
});

The call to

user.createUser('<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="2b5f4e585f6b5f4e585f05484446">[email protected]</a>', 'test');
in the beforeEach callback fails with
UnknownError: email is not defined
at
auth.$createUser(email, password);
.

I am curious why the email variable is not accessible in the callback function. Is there a way to pass arguments to the closing function that were initially passed to the createUser function?


After consulting with Andres D., I found a solution that worked for me. Here is the updated code:

exports.createUser = function (data) {
  browser.executeAsyncScript(function (data, done) {
    var $firebaseSimpleLogin = angular.inject(['ng', 'firebase']).get('$firebaseSimpleLoging');
    var firebaseRef = new Firebase('https://urltoapplication.firebaseio.com');
    var auth = $firebaseSimpleLogin(firebaseRef);

    auth.$createUser(data.email, data.password);

    done();
  }, data);
};

Answer №1

During a recent Angular meetup, I shared this practical example:

If you need to pass more than one value when using executeAsyncScript, it is advisable to encapsulate them in an object:

module.exports = {
  create: function(data) {
    return browser.executeAsyncScript(function(data, callback) {
      var api = angular.injector(['ProtractorMeetupApp']).get('apiService');
      api.member.save(data, function(newItem) {
        callback(newItem._id);
      })
    }, data);
  }
};

create({email: '<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="2f5c4b496f5c4b49el9kwokml">[email protected]</a>', password: 'sfd'}).then(function(response){
  // Handle response here.
})

Link to source code on GitHub

Answer №2

The issue we are facing is that when executeAsyncScript is executed in the selenium-run browser, it does not transfer variables from the parent scope.

It seems challenging to find a solution for passing variables in this manner.

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

Is it possible to submit a HTML5 form and have it displayed again on the same page?

Is it possible to simply reload the sidebar of a page containing an HTML5 form upon submission, or is it necessary to load a duplicate page with only the sidebar changed? I am unsure of how to tackle this situation; firstly, if it is achievable in this m ...

Passing a single item from a list as a prop in Vue.js

Imagine having the following set of information in data: data: { todos: [ { id: 1, title: "Learn Python" }, { id: 2, title: "Learn JS" }, { id: 3, title: "Create WebApp" } ] } Now, I aim to send only the item with an id of 2 t ...

What is the process for including a class on a div element?

I have written a code that displays a series of images in a sequence. Once the last image appears, I want to switch the class from .d-none to .d-block on the div Can this be achieved? onload = function startAnimation() { var frames = document.getE ...

What is the best way to configure my Express API endpoint so that it can generate customized responses based on the parameters in the URL?

Currently working on a react-admin project where I need to establish a connection with an express server using a data provider. Despite my efforts, I have been unable to implement sorting and pagination functionality. It seems like modifications are requi ...

Implementing Ajax functionality in MVC 3 to return a partial view

I wanted to express my gratitude for this invaluable site that has taught me so much. Currently, I am working on an MVC3 component where I need to populate a selectlist and upon user selection, load a partial view with the relevant data displayed. Everythi ...

There appears to be an issue with generating an HTML report using nosetests in Python as the option `--html--

Hi there, I'm having some trouble with my Selenium Python regression test script. My HTMLTestRunner isn't working as expected for generating the test report, so I decided to give the Nose plugin a try instead. I've gone ahead and installed ...

Ubuntu compatibility with chrome-driver 83

Currently using Ubuntu 18.04.1 LTS with Google Chrome version 83 and corresponding chrome-driver version 83 successfully for a while, I recently encountered an issue after updating to the latest stable versions: google-chrome-stable v83.0.4103.61 and chrom ...

Issue encountered with connecting Node.js to Oracle Database: Error - TypeError: oracle.getconnection is not a recognized function

export class DataBaseConnector { establishConnection() { let connection; const oracleDB = require('oracledb'); try { connection = oracleDB.getconnection({ user : 'user', password : 'password&apo ...

How can I ensure my game or website fits perfectly on the screen without any need

I have recently developed a fun Erase-A-Man game that is optimized for mobile devices. However, I am facing an issue where users need to scroll to view all the letters on their screens. My goal is to make the game fit perfectly on all phone screen sizes so ...

Is there a way to access an HTML element using Vue's methods?

Here is an example of my Vue component structure: <template> ... </template> <script> export default { methods: { buildDescription () { if (!this.description) { const div = document.createEl ...

What is the best way to simulate DynamoDB promise functionality with Jest?

Looking for a solution without using any libraries (as they haven't worked in my case). How can I make it work for that promise returned by the dynamodb query? Check out the code to be tested below: const isUrl = require('is-url'); const ...

Bug Alert: Incompatibility between Angular $resource and PHP causing issues with Update and Delete functionalities

As a newcomer to both AngularJS and PHP, I have been struggling to find comprehensive documentation on using $resource to update records in a database. While I did come across a helpful tutorial here that covers most aspects of $resource usage, I am having ...

What is the method for deactivating a form input field in Angular Formly?

Is there a specific way to disable a form input field using Angular Formly? I have tried searching online and cannot find a clear answer. Even after checking Formly's 'field configuration docs', I only found one mention of the word 'dis ...

Having difficulty populating a selection box through an ajax request in Django

I am facing an issue with creating cascading select boxes in my project (backend Django), although I believe most of the backend work has been completed. The JavaScript code I'm using is adapted from a solution found on a stackoverflow post. $(docume ...

Expanding functionality: Steps to integrating a new endpoint into your AWS Amplify Express Server

I have created a REST express server using Amplify. Attempted to include two additional endpoints: // incorporating serverless express app.post('/myendpoint', function(req, res) { console.log('body: ', req.body) res.json(req.body) ...

Why is my md-button in Angular Material displaying as full-width?

Just a quick question, I created a simple page to experiment with Angular Material. On medium-sized devices, there is a button that toggles the side navigation, but for some reason, it expands to full width. There's no CSS or Material directives causi ...

"Learn the trick to replace the Ctrl + N shortcut in Firefox and initiate an AJAX request

Note: The answer provided by Juan Mendes has been selected as the best answer for my situation due to its usefulness. AxGryndr also offered valuable information, so I recommend reading both answers as they are beneficial in different scenarios. Thank you t ...

Should we pass <script> tags or unsanitized values to the Handlebars layout?

How can I pass values to handlebars that are not sanitized upon output? For instance, I want to ensure that when using the code res.render('index', {script: '<script src="bundle.js"></script>'}), it is not rendered as {{scri ...

Send the value to the <input> tag following each iteration in the functions

I am currently utilizing BootstrapVue. In my code, I have implemented a for loop to retrieve unique numbers from an array, which are stored as this.number. For each iteration of the loop, I use input.push() to add a new b-form-input element (in this case, ...

sidebar that appears upon the initial page load

I'm currently working on implementing a sidebar navigation panel for my website using JavaScript, HTML, and CSS. However, I am facing an issue where the sidebar automatically opens when the page is first loaded, even before clicking on the icon to ope ...