Value from dynamic table (Cypress) - automation

I need to take a value from a table that changes after every page refresh. For example CPU for Chrome
describe('test dynamic table and check Chrome CPU', () => {
it('passes', () => {
cy.visit('some url')
cy.contains('span', 'CPU')
.parent()
.within(() => {
cy.contains('[role=cell]', 'Chrome')
})
})
})
Table:
UPDATE:
FYI
After refreshing the page, you will get columns and row changing place:
enter image description here

You can do like this:
cy.contains('span', 'Chrome')
.parent()
.within(() => {
cy.contains('[role=cell]', '%')
.invoke('text')
.then((text) => {
cy.log(text) //Logs 8.3%
//removing % and converting into number and asserting
expect(+text.replace(/%/g, '')).to.be.greaterThan(5)
expect(+text.replace(/%/g, '')).to.be.lessThan(15)
expect(+text.replace(/%/g, '')).to.eq(8.3)
})
})

Related

Prevstate in reactJs

This might be a silly question, but how do I get data if I saved the state using prevState.
I am trying to retrieve data from database and send that data through navigation.
const [dataFromDatabase, setDataFromDatabase] = useState('');
const retrieveFromDatabase = () => {
db.transaction(
tx => {
tx.executeSql("SELECT * FROM PreLoveeedTable",
[],
(_, { rows }) => {
console.log("ROWS RETRIEVED");
// clear data currently stored
setDataFromDatabase('');
let entries = rows._array;
entries.forEach((entry) => {
setDataFromDatabase(prev => prev + `${entry.id}, ${entry.image}, ${entry.title}, ${entry.price}, ${entry.description}\n
});
},
(_, result) => {
console.log('SELECT failed!');
console.log(result);
}
)
}
);
}
{dataFromDatabase} will give me the whole entire data in the database.
But wanted to have each entry in the Database. For example entry for title.
I have been stuck on this for a while now and would be appreciated it if i can get a hint.

Cypress. How skip part of autotest if "if part couldn't be find"

So, I practice Cypress.
I can't find information, how i can skip "if" part, if it doesn't work.
enter image description here
enter image description here
describe('test that XPath from task does not work and change non-breaking space', () => {
it('passes', () => {
cy.visit('http://uitestingplayground.com/nbsp')
if (cy.xpath('//button[text()="My Button"]').click()) {
cy.log('Button found and clicked.')
}
else {
cy.xpath('//button[text()="My\u00a0Button"]').click()
cy.log('Button found and clicked. But was problem with non-breaking space in XPath.')
}
})
})
You can do like this. Here length > 0 will check if the element is present in the DOM.
describe('test that XPath from task does not work and change non-breaking space', () => {
it('passes', () => {
cy.visit('http://uitestingplayground.com/nbsp')
cy.get('body').then(($body) => {
if ($body.find('button selector').length > 0) {
cy.xpath('//button[text()="My Button"]').click()
cy.log('Button found and clicked.')
} else {
cy.xpath('//button[text()="My\u00a0Button"]').click()
cy.log(
'Button found and clicked. But was problem with non-breaking space in XPath.'
)
}
})
})
})

How can I access to each element inside of a grid element with Cypress?

I have a Grid component which includes 24 divs and inside of each div I need to take the value.
This value actually arrives in <p>, so which is the best way to do this?
Below is the app image. I would appreciate an example.
You could probably do something like storing the data in an object or array outside of the Cypress chain. Without a code example, here's my best guess.
cy.get('grid').within(() => { // cy.within() searches only within yielded element
const data = {}; // create data object
cy.get('div').each(($div, index) => { // cy.each() allows us to iterate through yielded elements
data[index] = $div.text() // or possibly some other JQuery command to get the value
// additionally, could go without the index at all and make `data` an array.
}).then(() => {
// whatever needs to be done with `data`, wrapped in `then` to make sure data is populated correctly.
});
});
You can add use each for this to loop through the elements and then do further operations:
cy.get('.chakra-stack')
.find('p')
.each(($ele) => {
cy.log($ele.text().trim()) //Logs all the texts one by one
})
Just add the p selector to your cy.get() command
cy.get('div.chakra-stack p') // access <p> within <div>
.each($el => {
cy.wrap($el).invoke('text')
.then(text => {
...
})
})
To get the value before the text
cy.get('div.chakra-stack p') // access <p> within <div>
.each($el => {
cy.wrap($el)
.prev() // element with value
.invoke('text')
.then(value => {
...
})
})
Accessing values by text label like this
const values = {}
cy.get('div.chakra-stack p')
.each($el => {
const frase = $el.text()
cy.wrap($el).prev().invoke('text')
.then(value => values[frase] = +value)
})
.then(() => {
// values = {'shield': 1, 'session': 2, ...}
})

How can I set a state only if there is a condition?

I have a percentage into a text view that changes, but it can't be more than 100%. I use a function with a setstate and I want that if the percentage in the text view is more than 100% it changes in 100%.
Something like this:
onPressLearnMore= () => {
this.setState({
rareperc1: (this.state.rareperc2*this.state.boxes),
rareperc:parseFloat(this.state.rareperc1).toFixed(4),
if(rareperc==100){
rareperc:100,
}
...
});
}
The actual code is:
onPressLearnMore= () => {
this.setState({
rareperc1: (this.state.rareperc2*this.state.boxes)
rareperc:parseFloat(this.state.rareperc1).toFixed(4),
...
});
}
You can do like this.
rareperc:this.state.rareperc1>100?100:parseFloat(this.state.rareperc1).toFixed(4)
I solved with this:
onPressLearnMore= () => {
var rarepervalue = (this.state.rareperc2*this.state.boxes)+
(this.state.boxes*this.state.incremento1);
if(rarepervalue>100) rarepervalue=100;
this.setState({
percentages: percentuale,
rareperc1: rarepervalue,
rareperc:parseFloat(this.state.rareperc1).toFixed(4),

UAT > How to check the ordering of data in a table using Selenium?

I need to test that a resulting list is ordered date descending using selenium.
this.Then(/^the list items should be ordered by date descending$/, (arg1): CucumberStepOutput => {
actions
return 'pending';
});
I'm sure this is something that has been done many times by people in the selenium community - I am hoping someone will share best practice.
If anyone is interested in the answer or at least the solution I ended up with see the snippet below.
It's a bit ugly (comment with suggestions to clean up) but works!
this.Then(/^the list items should be in descending$/, (): CucumberStepOutput => {
return new Promise<void>((resolve, reject) => {
let expectedValues = ['value1',
'value2',
'value3'
];
client.elements('.element-class').then(elements => {
let resultDates: Array<string> = [];
elements.value.reduce<Promise<void>>((chain, nextElement) => {
return chain.then(() => {
return client.elementIdText(nextElement.ELEMENT).then(text => {
resultVa.push(text.value);
});
});
}, Promise.resolve()).then(()=>{
JSON.stringify(resultValues).should.equal(JSON.stringify(expectedValues));
resolve();
})
});
});
});