Capturing Data from Tables and Saving it with Protractor

Question

Capturing Data from Tables and Saving it with Protractor

Imagine having a table structured like this

    <h2>HTML Table</h2>

<table>
  <tr>
    <th>Company</th>
    <th>Contact</th>
    <th>Code</th>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>THK-ASA-AKK</td>
  </tr>
  <tr>
    <td>Centro comercial Moctezuma</td>
    <td>Francisco Chang</td>
    <td>KAL-ASA-AKK</td>
  </tr>
  <tr>
    <td>Ernst Handel</td>
    <td>Roland Mendel</td>
    <td>MAK-ASA-AAKS</td>
  </tr>
  <tr>
    <td>Island Trading</td>
    <td>Helen Bennett</td>
    <td>ABC-ASA-AKK</td>
  </tr>
  <tr>
    <td>Laughing Bacchus Winecellars</td>
    <td>Yoshi Tannamuri</td>
    <td>BSA-ASA-AKK</td>
  </tr>
  <tr>
    <td>Ernst Alimentari Riuniti</td>
    <td>Giovanni Rovelli</td>
    <td>KAL-ASA-AKK</td>
  </tr>
</table>

To locate the values under the Code header for Ernst, specifically two of them, using Protractor, you can implement the following method.

An attempt to achieve this goal by selecting the element with the code provided below:

element.all(by.cssContainingText('td','Ernst')).elment(by.css('td:nth-child(3)')).getText().then(function(code){
console.log(code)});

Despite running the script successfully, the desired text is not being displayed. What could be done differently to accomplish this task?

javascript selenium-webdriver protractor

Answer 1

Answer №1

Searching for a Specific Table Row

To find the table row containing the text 'Ernst', we need to iterate through each row and use the filter function. By utilizing the filter function, we can obtain an ElementArrayFinder object consisting of rows meeting our specified condition.

Within each `tr` element, we extract the corresponding `tds` collection. The boolean returned is based on whether the first column's text includes 'Ernst'. If true, this result is added to the ElementArrayFinder.

let ernstTrs = element.all(by.tagName('tr')).filter(tr => {
  tds = tr.all(by.tagName('td'));
  return tds.get(0).getText().then(text => {
    return text.includes('Ernst');
  });
});

Retrieving Data from the Selected Table Row

The obtained `ernstTrs` allows us to access the first element as an ElementFinder. Similarly, we search for the `td` collection within, targeting the 3rd column at index 2 to extract and display its text in the console.

let ernstTr = ernstTrs.get(0); // Obtain ElementFinder from ElementArrayFinder

let ernstTds = ernstTr.all(by.tagName('td'));
let ernstTdCode = ernstTds.get(2);

// Output Ernst code from column 2:
ernstTdCode.getText().then(text => {
  console.log(text);
});

Enjoy your Protractor journey!

Answer 2

Searching for a Specific Table Row

To find the table row containing the text 'Ernst', we need to iterate through each row and use the filter function. By utilizing the filter function, we can obtain an ElementArrayFinder object consisting of rows meeting our specified condition.

Within each `tr` element, we extract the corresponding `tds` collection. The boolean returned is based on whether the first column's text includes 'Ernst'. If true, this result is added to the ElementArrayFinder.

let ernstTrs = element.all(by.tagName('tr')).filter(tr => {
  tds = tr.all(by.tagName('td'));
  return tds.get(0).getText().then(text => {
    return text.includes('Ernst');
  });
});

Retrieving Data from the Selected Table Row

The obtained `ernstTrs` allows us to access the first element as an ElementFinder. Similarly, we search for the `td` collection within, targeting the 3rd column at index 2 to extract and display its text in the console.

let ernstTr = ernstTrs.get(0); // Obtain ElementFinder from ElementArrayFinder

let ernstTds = ernstTr.all(by.tagName('td'));
let ernstTdCode = ernstTds.get(2);

// Output Ernst code from column 2:
ernstTdCode.getText().then(text => {
  console.log(text);
});

Enjoy your Protractor journey!

Capturing Data from Tables and Saving it with Protractor

Answer №1

Searching for a Specific Table Row

Retrieving Data from the Selected Table Row

Similar questions

Utilize the useRef hook to dynamically retrieve the updated height when children are altered

Conditional statement that includes Node.js scheduling function

Utilizing Route Parameters in Node.js

Exploring the Power of Streams in JavaScript

Which NPM packages are necessary for implementing modular Vue components?

Django issue: A Tuple or struct_time argument is necessary

Convert JSON objects within an array into HTML format

Utilizing AngularJS, implement ng-form and ng-repeat to seamlessly handle input validation and submission actions

When attempting to perform conditional rendering in React using a stateless functional component, I encounter an error stating "Unexpected token, expected ,"

What is the reason behind the image not displaying before the AJAX request is initiated and then disappearing once the request is completed?

Ways to determine if the mouse is positioned at the bottom of a div area

Guide to setting the hiddenfield value within a listview using javascript or jquery

What is it about the setTimeout function that allows it to not block other

Simulate internationalization for vue using jest

Generating a JavaScript bundle using the npm TypeScript compiler

Retrieving a specific time using a JavaScript interface

Capturing AJAX responses within a Chrome Extension

Uncovering the Mystery of Undefined Dom Ref Values in Vue 3 Templaterefs

Using the jquery slider in conjunction with the onchange event

Disable onclick action for programmatically created buttons