We Keep Coding

How to test relative positioning of elements in cypress?

I am currently new to cypress and wants to test that Forgot Password should be below Login button in Facebook page? Is there a way to do that?
Is there a way to test relative positioning of elements in cypress?

I think you can use jQuery .position()
cy.get('#element1')
.then($el => $el.position().top) // get 1st top value
.then(top1 => {
cy.get('#element2')
.then($el => $el.position().top) // get 2nd top value
.then(top2 => {
expect(top1).to.be.gt(top2)
})
})
Notes
Cypress use jQuery to find elements. Chaining .then($el => ... exposes the jQuery object containing the element, so now you can apply other jQuery functions that are not part of the Cypress commands.
In fact, any other Javascript functions you want.
You can also make reusable functions
const getTop = ($el) = $el.position().top;
cy.get('#element1').then(getTop)
.then(top1 => {
cy.get('#element2').then(getTop)
.then(top2 => {
expect(top1).to.be.gt(top2)
})
})

You can use the cypress method next() to determine the element next to Log in button like this. next() gets the immediately following sibling of each DOM element within a set of DOM elements.
cy.get('div[type="submit"]').next().should('have.text', 'Forgot password?')

react-select-event doesn't trigger the onChange function to set the value during testing

It's been a couple of days that I'm struggling with a test I'm trying to write and thought this would be a good place to ask for some tips. I'm trying to fill a form that uses react-select dropdowns, and these forms are inside a map that renders 4 of them. However when trying to run the code below on the selectors of each form in a loop, after the first iteration which runs fine, the input element found in the form to perform the onChange doesn't have the onChange handler and doesn't trigger the change function to select the option I need. The package I am using for the selection is react-select-event as per the documentation here. I am still a beginner with react-testing-library and testing in general so it's quite probable that I missed something. Any tips or ideas are welcome! Thank you 🙂
const selectOptionAndAssertValue = async (indicator, field, element, option, inputForm) => {
await selectEvent.select(element, option.label, {
container: document.body,
});
await waitFor(
async () => {
expect(inputForm).toHaveFormValues({
[${indicator.short_alias}-${field}]: option.value,
});
},
{
onTimeout: error => console.log(error),
}
);
};
Note: to find the inputForm, I am using findByLabelText and it does find the element.
EDIT: Issue replicated in this repo https://github.com/ildaballiu/select-testing-demo

The issue was solved by changing the container to
container: () => document.body.querySelector('[class$=-menu]')

Ag-grid: duplicate node id 107 detected from getRowNodeId callback , this could cause issues in your grid

I am going to do live data streaming on ag-grid datatable, so I used DeltaRowData for gridOptions and added getRowNodeId method as well which return unique value 'id'.
After all, I got a live update result on my grid table within some period I set, but some rows are duplicated so I can notice total count is a bit increased each time it loads updated data. The question title is warning message from browser console, I got bunch of these messages with different id number. Actually it is supposed not to do this from below docs. This is supposed to detect dups and smartly added new ones if not exist. Ofc, there are several ways to get refreshed data live, but I chose this one, since it says it helps to persist grid info like selected rows, current position of scroll on the grid etc. I am using vanilla js, not going to use any frameworks.
How do I make live data updated periodically without changing any current grid stuff? There is no error on the code, so do not try to speak about any bug. Maybe I am wrong with current implementation, Anyway, I want to know the idea or hear any implementation experience on this.
let gridOptions = {
....
deltaRowDataMode: true,
getRowNodeId = (data) => {
return data.id; // return the property you want set as the id.
}
}
fetch(loadUrl).then((res) => {
return res.json()
}).then((data) => {
gridOptions.api.setRowData(data);
})
...

If you get:
duplicated node warning
it means your getRowNodeId() has 1 value for 2 different rows.
here is part from source:
if (this.allNodesMap[node.id]) {
console.warn("ag-grid: duplicate node id '" + node.id + "' detected from getRowNodeId callback, this could cause issues in your grid.");
}
so try to check your data again.
if u 100% sure there is an error not related with your data - cut oof the private data, create a plinkr/stackblitz examples to reproduce your issue and then it would be simpler to check and help you.

Is there a way in protractor, by which we can iterate through the webelement having the same css and click on the element with matching text

PageObject.js(Select_Organization.js)
this.selectOrganization = function() {
organizationLocator.each(function(element) {
FunctionLibrary.getText(element, organizationName).then(function(text) {
logger.info(text);
if (text.includes('ImageResizingOrg')) {
FunctionLibrary.click(element, organizationName);
}
})
})
};
Spec.js
it('should be able to select the required organization', function() {
Select_Organization.selectOrganization();
});
Scenario:
I want to store all the elements having the same class name in a list and then iterate through it using for-each loop and click on the element if the text of the elementFinder is same as that required.
Issue I am facing: Due to async nature of the javascript this is not getting handled properly as sometimes stale element exception is getting thrown. I know the reason which is because all the actions are getting stored in control flow queue.
I just need a solution for this :) Any help will be highly appreciated

Word: Update a TableRow using the Word JavaScript Api

I'm having difficulties to update the values of a Word.TableRow using the Javascript API. I've look to Doc and I can't find any hints that will help me to accomplish my duty...
Here is my Question: What is the best way to set the values of a TableRow inside a Word Document using the Javascript API.
And Here is what I tried:
Word.run((context: Word.RequestContext) => {
var tables = context.document.body.tables;
tables.load("items");
return context.sync().then(() => {
var firstTableRows = tables.items[0].rows;
context.load(firstTableRows, "items");
context.sync().then(() => {
var header = firstTableRows.items[0];
header.load("values");
context.sync().then(() => {
header.values = ["MyValue"]
context.sync();
});
});
});
}).catch(errorHandler);
This is a 1x2 table
No errors are thrown and the table is not getting updated...
Am I missing something?

Sorry for the delayed response here. There are a couple of issues with your code.
the first one is associated with a bug we are currently fixing with keeping references of items mentioned in the load method. There is a related question on stack explaining this issue. Check it out here. (specially the detailed explanation in the comments).
The second issue I see with your code is that you are trying to set the row values using a 1d array, when a 2D array is expected. (and this is an error in our documentation, we need to fix it thanks to you!)
You have a couple of options for changing values, this is the first one:
Word.run(function (context) {
var myTables = context.document.body.tables;
context.load(myTables);
return context.sync()
.then(function () {
var myRows = myTables.items[0].rows;
context.load(myRows);
return context.sync()
.then(function () {
//assumes a table with at least 3 columns!
myRows.items[0].values = [["1", "3", "4"]];
return context.sync()
})
})
})
.catch(function (e) {
app.showNotification(e.message);
})
}
Now, until the bug mentioned in the first point is fixed you need to do several trips to the host application in order to set the data you want. a potential shortcut is to use our new navigation options,specially if you want to change the first or last row values (please note that we are planning to rename the first to getFirst() by the time we ship the API, so this code will break in a couple of months, maybe already breaks if you are using the insider fast release), you can do something like this in just one call:
Word.run(function (context) {
//this gets the first row of the first table in the document and sets its values. Please note the 2D array used!
context.document.body.tables.first.rows.first.values =[["Juan", "Peter", "Jeff"]];
return context.sync()
.catch(function (e) {
app.showNotification(e.message);
})
})
Please give it a try to these options and let me know how it goes.
thanks!