Protractor struggles to locate mobile values in the HTML DOM despite Selenium's capabilities

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?

Answer №1

The method .getText() retrieves the visible text content of an element. If the element is not in view or if it is overlapped by other elements, it will return an empty string.

In such scenarios, you can use .getAttribute('innerText');

const orderNumber = element(by.css('[data-ft="order-number"]'))
const orderNumberText = await orderNumber.getAttribute('innerText');
console.log(`Order Number: ${orderNumberText}`);

Give this a try to see if it resolves your issue

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Having some trouble in IntelliJ when trying to add the MVN dependency for Selenium Java version 3.141.59. Any advice on how to fix this?

I encountered the following issues: Dependency 'org.seleniumhq.selenium:selenium-java:3.141.59' cannot be located Dependency 'org.seleniumhq.selenium:selenium-java:3.141.59' cannot be located Dependency 'org.seleniumhq.selenium:sel ...

The functionality of php.js is compromised

I've been attempting to integrate php.js into my scripts, but have encountered a problem. I debugged a function and loaded it onto a single page containing only jQuery and php.js, yet it is still not functioning properly. <script src="http://code. ...

Adding and removing controls on Google Maps in real-time

Recently, I encountered an issue with my custom search bar overlapping some controls on my map. Despite adjusting the z-index of these controls, they continued to stay on top. To work around this problem, I thought about hiding the controls during the sear ...

JavaScript: Remove duplicates and count the number of unique properties in an array

Arrays have always been a challenging aspect for me, so I would really appreciate any assistance. ...

Find out if OpenAI's chat completion feature will trigger a function call or generate a message

In my NestJS application, I have integrated a chat feature that utilizes the openai createChatCompletion API to produce responses based on user input and send them back to the client in real-time. Now, with the introduction of function calls in the openai ...

How can a form be submitted in Extjs without using ajax?

Hello there! I'm attempting to submit an extjs form without using ajax and display the result on the next page. Below is my code: Ext.define('test.from', { extend: 'Ext.form.Panel', alias: 'widget.test.form', ...

Can I exclusively utilize named exports in a NextJS project?

Heads up: This is not a repeat of the issue raised on The default export is not a React Component in page: "/" NextJS I'm specifically seeking help with named exports! I am aware that I could switch to using default exports. In my NextJS ap ...

An error is thrown when using less.js

Every time I attempt to add less.js, I encounter an XmlHttpRequest Exception 101. Including the .less file is done using this method: <link rel="stylesheet/less" type="text/css" href="anything.less" /> This issue only arises when I upload the th ...

Issue: React error message indicates that the .map() function is not recognized. The API response is in the form of an object, making

As a newcomer to REACT.JS, I am currently facing the challenge of extracting data from an API for my project. Utilizing "Axios" for sending the get request, I have encountered a situation where the response comes back as an array in one API and as an objec ...

Having trouble making an ajax request using Cordova?

I recently started a new project and included some code for making a request. Below is how my JavaScript file looks: (function () { "use strict"; document.addEventListener( 'deviceready', onDeviceReady.bind( this ), false ); function onDeviceR ...

streamlining the deletion of Yahoo emails

Currently, I am utilizing Selenium IDE within Firefox to remove unread emails from Yahoo mail. With approximately 30,000 unread emails in our inbox, it seems that Yahoo only deletes less than 100 at a time. I have recorded the necessary steps for this pro ...

Unlock the Power of Vue Draggable in Vue.js 3 with These Simple Steps

When attempting to implement Draggable in Vue.js 3, I encountered an error message: VueCompilerError: v-slot can only be used on components or <template> tags. Below is a snippet of my code: <draggable tag="transiton-group" name="s ...

I encountered a webdriver error while using Selenium in Google Colab

I attempted to find the solutions through Google, however, they proved to be ineffective. I am feeling quite disheartened at the moment. https://i.sstatic.net/lMJXe.png ...

Display a loading screen to the user while Vue lazy loads the content

I am currently implementing lazy loading features for my single-page application using Vue.js and Laravel Mix 5. I am looking for a way to display a loading page to prevent the app from appearing unresponsive while new pages are loading. I attempted to ad ...

Encountering a mixed content error in Internet Explorer 8 due to the Nivo slider jQuery?

I am encountering an issue with the Nivo jQuery slider on my HTTPS website, as it appears to be generating a mixed content error in Internet Explorer 8. Despite posting on the Dev7 Studios forum and conducting extensive research on the IE 8 mixed content ...

Working with Vue.js to call component methods when the page loads

My payment implementation utilizes vue-js and stripe. I found that the only way to incorporate Stripe with vue-js was through the use of script.onload. Now, I am trying to access some of my methods within the onload function. Specifically, I want to call ...

Adding a click function to a div individually when they share the same class in HTML

My goal is to include 4 unique divs inside a timeline container: This is how I envision the structure: <div id="timeline" > <div class="timeline-bar t-1"></div> <div class="timeline-bar t-2"> ...

Twitter Scraper: Selenium is unable to retrieve all tweets from the page

I'm currently working on developing a bot that can automatically delete tweets based on a specific date. One issue I encountered was the need to scroll the page to fetch more tweets each time. However, the real problem arises when trying to extract tw ...

Loading bar for AngularJS material framework

Is there a way to integrate https://material.angularjs.org/latest/demo/progressLinear into my website so that it shows progress when a new view is loading? I'm trying to figure out how to obtain the value of the current page being loaded. Any suggest ...

Is there a way to select a checkbox in Google Forms using the console?

I need help with a script I'm creating to automatically populate Google Forms. I am able to select checkboxes using querySelector, but they don't have a .click() method or similar. How can I go about checking the checkboxes? ...