how can i click on another element, when original was not found?

Question

I've created a function to select the payment randomly (number). when the first selection (number) is not found (try catch) then I want to select another one.

But I always receive:

Failed: Cannot read property 'click'

when sending number 8 and it should select credit cart visa...

What am i doing wrong? The elements are really there and the id is also correct:

CheckoutPage3.prototype.selectPayment = function (number) {
    if (number == 1) {
        try {
            this.elementPaymentPaypal.click().then(function () {
                return 1;
            }, function (err) {
                console.log("payment not found, select new");
                this.elementPaymentCreditCard.click();
                this.elementCreditVISA.click();
                number = 2;
            });
        }
        catch (err) {
            console.log('error occured');
        }
    }
    else if (number == 2) {
        this.elementPaymentCreditCard.click();
        this.elementCreditVISA.click();
        number = 2;
    } else if (number == 3) {
        this.elementPaymentCreditCard.click();
        this.elementCreditMasterCard.click();
        number = 3;
    }
    else if (number == 4) {
        try {
            this.elementPaymentCreditCard.click();
            this.elementCreditAmericanExpress.click().then(function () {
                number = 4;
            }, function (err) {
                console.log("payment not found, select new");
                this.elementCreditVISA.click();
                number = 2;
            });
        }
        catch (err) {
            console.log('error occured');
        }
    }
    else {
        try {
            this.elementPrePayment.click().then(function () {
                number = 5;
            }, function (err) {
                console.log("payment not found, select new");
                this.elementPaymentCreditCard.click();
                this.elementCreditVISA.click();
                number = 2;
            });
        }
        catch (err) {
            console.log('error occured');
        }
    }
};

score 2 · Accepted Answer · edited May 23 '17 at 12:08

This is a common problem in JavaScript, in your page object the this is not always something you expect it to be. For example, in the promise resolution function here:

this.elementPaymentPaypal.click().then(function () {
    return 1;
}, function (err) {
    console.log("payment not found, select new");
    this.elementPaymentCreditCard.click();  // < HERE
    this.elementCreditVISA.click();  // < and HERE
    number = 2;
});

this does not refer to the instance of the "current" page object anymore.

The common way to approach the problem is to save the reference to this in the parent scope:

CheckoutPage3.prototype.selectPayment = function (number) {
    var self = this;

    if (number == 1) {
        try {
            // ...

And then use self instead of this:

this.elementPaymentPaypal.click().then(function () {
    return 1;
}, function (err) {
    console.log("payment not found, select new");
    self.elementPaymentCreditCard.click();
    self.elementCreditVISA.click();
    number = 2;
});

how can i click on another element, when original was not found?

1 Answers1