Recently, I've come across a new feature in the Protractor documentation - the by.js():
This feature allows you to locate elements by evaluating a JavaScript expression, which can be either a function or a string.
While I understand how this locator works, I am curious about its practical applications. In what scenarios would it be beneficial to use by.js over other standard locators such as by.css?
In situations where traditional CSS and element locators are not sufficient, core JavaScript functions can be used to access elements. This is especially helpful in scenarios such as:
browser.executeScript, by.js can serve as a replacement.For example:
If you need to access an element positioned between two others, you can achieve this using the following method:
var ele = element(by.js(function(){
var ele1 = document.getElementById('#ele1');
var ele2 = document.getElementById('#ele2');
var val = ele1.compareDocumentPosition(ele2);
if(val === 4) return ele1;
else return ele2;
}));
by.js can also be employed alongside the filter method.For instance:
If there's an element with :before and :after transitions applied:
.element:before {
color: rgb(255, 0, 0);
}
To verify the color of the element, by.js can be utilized by passing a JavaScript statement to retrieve the element -
var ele = element(by.js(function(){
return window.getComputedStyle(document.querySelector('.element'), ':before');
}));
expect(ele.getCssValue('color')).toEqual('rgb(255, 0, 0)');
This approach can be quite useful in certain testing scenarios.
In my opinion, the opportunities for utilizing this feature may be limited, but it could prove beneficial in situations where client data is not easily accessible or unreliable through selenium.
An interesting example mentioned in the documentation involves using offsetWidth:
spans[i].offsetWidth > 100
Here's how it can be used in a practical scenario:
var wideElement = element(by.js(function() {
var spans = document.querySelectorAll('span');
for (var i = 0; i < spans.length; ++i) {
if (spans[i].offsetWidth > 100) {
return spans[i];
}
}
}));
expect(wideElement.getText()).toEqual('Three');
Alternatively, there might be a situation where accessing a third-party API on the window or another service could assist in locating an element.
After recently downloading Visual Studio 2013 Express for Web, I am struggling to figure out how to deploy projects that only consist of JavaScript, HTML5, and CSS3. Despite searching online for JavaScript templates and even trying to download Visual Stu ...
Looking for some quick answers that should be easy for someone with expertise to provide. I have a basic asp.net site that relies on JSON for various tasks (and JSON.stringify). Everything works fine in Firefox and the like, but in IE6 I'm getting a ...
Learning to code has been a fascinating journey for me, but I must admit that JavaScript presents a unique challenge. Currently, I am working on creating a d3.js Bar Chart and I wanted to include a transition effect when the bars load. However, I have enco ...
Currently, there is a simple Flash project in development that connects to an RTMP server and streams video and audio from a webcam. The project allows users to create a stream with a specific name. This project also features an input for entering a strea ...
Learning about JavaScript is exciting! I recently tried incorporating a Google Geochart to generate visual reports. The sample code looked like this: function drawRegionsMap() { var data = google.visualization.arrayToDataTable([ ['Country ...
The desired output should display as LUNG,KIDNEY,SKELETON>J169>U and E, CREATININE:no instead of >LUNG,KIDNEY,SKELETON>J169>U and E, CREATININE:no. Is there a way to achieve this using JavaScript? Specifically, the ">" character at the be ...
How can I set up my code to display a warning in the console if the value of the Prop is not a string? The player-name prop should always be a string. If this: <greet :player-name="5"></greet> contains a number, I want my code below to generat ...
Here is a line of code in threejs: document.addEventListener('mousedown', onDocumentMouseDown, false); This particular code snippet causes the input field to lose focus when clicked. This can be problematic, for instance, when there is a canva ...
In ReactJs, I have developed a main component known as MainPage using Material-UI. import React from 'react'; import Grid from '@material-ui/core/Grid'; import Button from '@material-ui/core/Button'; import CssBaseline from & ...
I am struggling to find the xpath for a button element that says 'Cancel'. <div class="uipresk"> <button class="something" role="button" type="button"> <span class="thisthing">OK</span> </button> ...
Currently, I am utilizing Material UI Chip Input wrapped with Field from react-final-form. https://i.sstatic.net/vJKM1.jpg The main objective is to restrict the number of "CHIPS" to a maximum of 5. Chips serve as concise elements representing inputs, at ...
When I receive URLs for trackers from an external resource, they often contain a # symbol which causes the URL to be cut off after the pound sign when trying to execute/load it in the DOM. Unfortunately, these URLs are provided by a 3rd party and I have no ...
I have an array that looks like this: items = { item1: 10, item2: 5, item3: 7, item4: 3, }; I am looking to include additional details in this array, for example: items = { item1: 10 {available: true}, ...
My webpage contains a video tag for playing online videos. Instead of just one, I have utilized two video tags. However, when attempting to play both videos simultaneously, they end up playing at the same time. I am seeking a solution where if I start pla ...
I am in the process of developing a form and am looking to create dynamic text boxes using Bootstrap. The code that I have currently works as expected: $(function() { $(document).on('click', '.btn-add', function(e) { e.preventD ...
I have multiple links on my website, each describing a different location with unique map data. I would like to display a modal bootstrap dialog with an embedded Google map when a user clicks on any of the links - ensuring that the location shown correspon ...
I have some code that is calling a web service and I have a few questions. Firstly, what is the best way to call a second web service? Currently, I am calling one and displaying the data in a list. But if I need to call a second web service, should I also ...
I'm struggling with accessing data using a directive, especially when I have defined my models like this: vm = this; vm.myModel = "hello"; Here is an example of my directive: function mySelectedAccount(){ return { restrict: 'A&ap ...
I have a node/express application and need to send a JavaScript object to the browser. Currently, I achieve this by using JSON.stringify on the object and then embedding it into the HTML: In my Node.js/Express code: var myObject = /* fetched from databas ...
I have a basic anychart code to update a gantt chart every second: function initializeSchedule(){ anychart.onDocumentReady(function () { anychart.data.loadJsonFile("../scheduler?type=getschedule", function (data) { documen ...