CODEWITHSUNDEEP
nightwatch.js
Ritesh Bhanushali
Ritesh Bhanushali

Reputation: 11

How to extend scope of a variable declared in a callback function. Nightwatch e2e test

In my nightwatch test, I want to pass an value from a callback to my assert statement. But i am unable to find a solution.

const navCategoriesMen = function(client, subCat, assertUrl, catName){ client .url("") .waitForElementVisible('div.row.header-main-nav-content li.MEN') .moveToElement('div.row.header-main-nav-content li.MEN',0,0) .pause(3000) .elements('css selector',subCat, function(els){ 

         for(var i=1; i<=els.value.length; i++){
            var abc;

            var catName= client.getText('li.MEN.open ul li li:nth-child(1) ul > a:nth-child('+i+')', function(res){
                abc = res.value;
                console.log(abc);

            }); 

            client
            .click('li.MEN.open ul li li:nth-child(1) ul > a:nth-child('+i+')')
            .waitForElementVisible('.banner-section.category-page-banner.banner-sec')
            .assert.containsText('#facet-browse > div > div > ul > li.global-views-breadcrumb-item-active',abc)

But I am getting 'abc' as undefined value.

Upvotes: 0

Views: 429

Answers (2)

saikri
saikri

Reputation: 157

You can also wrap around with the perform function 

const navCategoriesMen = function(client, subCat, assertUrl, catName){
client
    .url("")
    .waitForElementVisible('div.row.header-main-nav-content li.MEN')
    .moveToElement('div.row.header-main-nav-content li.MEN',0,0)
    .pause(3000)
    .elements('css selector',subCat, function(els){

     for(var i=1; i<=els.value.length; i++){
        var abc;

        var catName= client.getText('li.MEN.open ul li li:nth-child(1) ul > a:nth-child('+i+')', function(res){
            abc = res.value;
            console.log(abc);

        }); 

        client
        .click('li.MEN.open ul li li:nth-child(1) ul > a:nth-child('+i+')')
        .waitForElementVisible('.banner-section.category-page-banner.banner-sec');
        client.perform(()=>{client.assert.containsText('#facet-browse > div > div > ul > li.global-views-breadcrumb-item-active',abc)});

Upvotes: 0

Th&#233;ophile Pace
Th&#233;ophile Pace

Reputation: 864

Obviously, the assert statement is executed before the call back returns like this pseudo code shows: 

var abc; //undefined

var catName = client.getText('li.MEN.open ul li li:nth-child(1) ul > a:nth-child(' + i + ')', //waiting for the answer

//execute that inbetween
client
  .click('li.MEN.open ul li li:nth-child(1) ul > a:nth-child(' + i + ')')
  .waitForElementVisible('.banner-section.category-page-banner.banner-sec')
  .assert.containsText('#facet-browse > div > div > ul > li.global-views-breadcrumb-item-active', abc) //abc still undefined
  
  //response from the getText, execute the call back
  function(res) {
  abc = res.value;
  console.log(abc);

});

You must either use a return pattern (you may consider ES8 async/await) or a callback pattern, but you can't get the value out of the callback. What you may do is testing the result inside the callback if it's possible, like this: 

const navCategoriesMen = function(client, subCat, assertUrl, catName) {
    client
      .url("")
      .waitForElementVisible('div.row.header-main-nav-content li.MEN')
      .moveToElement('div.row.header-main-nav-content li.MEN', 0, 0)
      .pause(3000)
      .elements('css selector', subCat, function(els) {

          for (var i = 1; i <= els.value.length; i++) {
            var abc; // undefined

            var catName = client.getText('li.MEN.open ul li li:nth-child(1) ul > a:nth-child(' + i + ')', function(res) {
              abc = res.value;
              console.log(abc); // something, I'm sure you know what 
              
              // abc has the good value, let's run the test
              client
                .click('li.MEN.open ul li li:nth-child(1) ul > a:nth-child(' + i + ')')
                .waitForElementVisible('.banner-section.category-page-banner.banner-sec')
                .assert.containsText('#facet-browse > div > div > ul > li.global-views-breadcrumb-item-active', abc) //abc = something
            });

Upvotes: 1

Related Questions