I recently encountered an issue while attempting to scrape data for mobile test cases. The code snippet below works flawlessly for desktop, but on mobile it fails to find the desired element (resulting in an empty console log). Interestingly, when I print out the entire HTML DOM, the value is clearly present.
const orderNumber = element(by.css('[data-ft="order-number"]'))
const orderNumberText = await orderNumber.getText();
console.log(`Order Number: ${orderNumberText}`);
The structure of the HTML DOM including the desired element looks like this:
<div class="orderconfirmation-page">
<h3 class="orderconfirmation-title">Thank you for your purchase.</h3>
<div class="orderconfirmation-text">your order reference number:
<span class="order-number" data-ft="order-number">7940700123456</span>
</div>
While the previous code snippet functions perfectly on desktop, it fails to locate the element 'data-ft="order-number"' on mobile devices. Despite verifying its presence in the HTML DOM, the code still fails during execution. Any insights on what could be causing this discrepancy?