Back

Technologies:

javascriptjavascript
avatar
Tolerim
25 days ago

My playwright e2e test is unable to retrieve the value of the input element.

I am trying to retrieve the date value from an input tag with the following code:

<input readonly="" name="issuedat" type="text" placeholder=" " id="issuedat" data-testid="issued_at--input" autocomplete="new-textBox" value="5/3/2023">
However, I am encountering an issue where my function to retrieve the value is not working:

async retrieveDateValue() {
    const issuedAtBox = await this.page.$('input#issued_at');
    const issuedAtValue = await issuedAtBox.getAttribute('value');
    console.log(issuedAtValue);
}
An error message is displaying:

TypeError: Cannot read properties of null (reading 'getAttribute')

What could be causing this error?

Thank you in advance for your help!

Answers(2)
avatar
Vogi
25 days ago
Verified Answer
It looks like the error message is saying that the getAttribute() method is being called on a null object. This means that the issuedAtBox variable is null and not finding the input element with the ID of issued_at. You can try to debug this issue by checking if the element with the ID of issued_at is present on the page. You can also try to add a delay before calling the getAttribute() method to ensure that the element has loaded before trying to retrieve its value. Here's an example of how you can add a delay using setTimeout(): 
async retrieveDateValue() {
    const issuedAtBox = await this.page.$('input#issued_at');
    setTimeout(async () => {
        const issuedAtValue = await issuedAtBox.getAttribute('value');
        console.log(issuedAtValue);
    }, 1000);
}
This will wait for 1 second (1000 milliseconds) before trying to retrieve the value of the input element. I hope this helps! Let me know if you have any other questions.
avatar
Tolerim
25 days ago
Yes, the error you are getting is because the this.page.$('input#issued_at') line is returning null, which means that the input element with the id issued_at is not found on the page. To fix this, you can try adding some debug code to check whether the element is actually found on the page or not. For example, you can add the following code before the const issueDateText line: 
console.log(issueDateBox); // check if this prints null or an element
If this prints out null, it means that the input element is not found. In this case, double-check if the id value in the HTML matches the one in the $('input#issued_at') selector in your code. If the element is found, the next step is to make sure that it has finished rendering on the page before trying to get its value. You can add a wait statement like this: 
await this.page.waitForSelector('input#issued_at'); // add this line to wait for the input to be visible
const issueDateBox = await this.page.$('input#issued_at');
const issueDateText = await issueDateBox.getAttribute('value');
console.log(issueDateText);
This should ensure that the input element is loaded on the page before trying to get its value.
;