WebdriverIO: Passing arguments to XPath selectors as part of class

Question

I have a mapping and async function below that does not work and I don't understand why.

class MySitePage {
    get goToMySiteButton() {
        return $(`//div/p[contains(text(),"${firstName}")]/following-sibling::p[contains(text(),"${lastName}")]/following-sibling::button`);
    }
}

async goToMySite (firstName, lastName) {
    const myButton = await this.goToMySiteButton(firstName, lastName);
    await myButton.waitForClickable();
    await myButton.click();
}

Trying to call goToMySite in a script throws the error ReferenceError: firstName is not defined. I've confirmed that the Xpath above works when values are subbed in for the variables and adding logging to the function above shows the values being passed to it are properly coming in.

Is there a different/better way to do this? Is there something I'm missing here?

Answer 1

To fix the error is to pass the firstName and lastName parameters to the goToMySiteButton getter method as arguments.

 class MySitePage {
    goToMySiteButton(firstName, lastName) {
        return $(`//div/p[contains(text(),"${firstName}")]/following-sibling::p[contains(text(),"${lastName}")]/following-sibling::button`);
    }

    async goToMySite(firstName, lastName) {
        const myButton = await this.goToMySiteButton(firstName, lastName);
        await myButton.waitForClickable();
        await myButton.click();
    }
}