I am trying to make an assertion on a wrapped element as below :
cy.get('somelist')
.each(($el, index) =>{
if(condition1)
cy.wrap($el).find('another_element').should('have.text', "TRUE")
else
cy.wrap($el).find('diff_element).should('have.text', "FALSE")
}
Error:$el.find(...).should is not a function.
If I use cy.get instead of find(), then the assertions will be wrong.
The error message doesn't match the code.
You can do this
cy.get('somelist')
.each(($el, index) =>{
if(condition1)
const text = $el.find('another_element').text()
expect(text).to.eq("TRUE")
else
const text = $el.find('diff_element').text()
expect(text).to.eq("FALSE")
}
The $el.find() is jQuery version and cy.wrap($el).find() is Cypress version.
Related
I have function to convert text to Uppercase, what i want to do is to write test in cypress for the fonction and print the result in htmml
here the function :
module.exports = () => ({
upperCaseName: (name) => {
return name.toUpperCase()
}
});
here i print it :
<h1 cy-data='uppercase'> the result </h1>
so how i should write the test :
i know i could do this :
cy.get('[cy-data=uppercase]').contains('the result')
but i want somthing like this :
example:
cy.get('[cy-data=uppercase]').to.be.upperCase
is it possible?
How about
cy.get('[cy-data=uppercase]').contains('THE RESULT', { matchCase: true })
but { matchCase: true } is the default setting, so can be just
cy.get('[cy-data=uppercase]').contains('THE RESULT')
Custom Chai assertion for uppercase
window.chai.Assertion.addProperty('uppercase', function () {
var obj = this._obj;
new chai.Assertion(obj).to.be.a('string');
this.assert(
obj === obj.toUpperCase()
, 'expected #{this} to be all uppercase' // error message when fail for normal
, 'expected #{this} to not be all uppercase' // error message when fail for negated
);
});
it('test for upper case (and not uppercase)', () => {
cy.get('[cy-data=uppercase]').invoke('text').should('be.uppercase')
cy.get('[cy-data=lowercase]').invoke('text').should('not.be.uppercase')
})
Extends internal Cypress version of Chai with new assertion, works in .should() with retry and timeout as well.
Or without custom chai assertion
it('test for upper case (and not uppercase)', () => {
cy.get('[cy-data=uppercase]').invoke('text')
.should(text => expect(text).to.eq(text.toUpperCase())
cy.get('[cy-data=lowercase]').invoke('text')
.should(text => expect(text).not.to.eq(text.toUpperCase())
})
You can use regex as well to check that the text has uppercase or not.
cy.get('[cy-data=uppercase]')
.invoke('text')
.should('match', /\b[A-Z]+\b/)
To check if everything in the sentence is in uppercase along with special characters you can use the regex ^[^a-z]*$
cy.get('[cy-data=uppercase]')
.invoke('text')
.should('match', /^[^a-z]*$/)
You can play around with regex as per your requirement.
Want to access a text from the group of the elements.
this approach doesn't work, the runner is giving an error saying that invoke is not a function
cy.get('div[class^="lalala"]')
.each(function($sec, i, $sects) {
$sec.find('header[class^="tatata"]')
.invoke('text').then((text) => {
let secText = text
cy.log(secText);
});
})
But without each() it is working when I am accessing any of the elements:
cy.get('div[class^="lalala"]').first()
.find('header[class^="tatata"]')
.invoke('text')
.then((text) => {
let secText = text
cy.log(secText);
});
})
How can I handle that?
$sec is a wrapped jQuery element and $sec.find() returns a jQuery element as well. You have to use cy.wrap to call invoke on it.
cy.get('div[class^="lalala"]').each(function ($sec, i, $sects) {
cy.wrap($sec.find('header[class^="tatata"]'))
.invoke('text')
.then((secText) => {
cy.log(secText)
})
})
is question is very similar to many others already answered. But these solutions didnt work. Here is the problem:
Having a Typescript class which calls an RxJS.ajaxPost() On Response pipe or callback "this" is undefined.
Usually I just use arrow functions ()=>{} to get rid of it. But it dont works in this case.
Why? How to handle ajax calls correctly and using responses?
export class Store {
count: number = 0;
getRest(): void {
ajaxPost('https://httpbin.org/delay/2')
.pipe(
tap((response) => {
console.log('response: ', response, this);
this.count += 1;
}),
catchError(error => {
console.log('error: ', error);
return of(error);
})
)
.subscribe((resp) => {
console.log("subs resp", resp, this);
});
}
}
Iam sorry, the error lies above!
for tests I had made 2 react components and wanted to use the getRest function directly. Of course this wont work.
In compare the upper function "addCount()" works fine.
My Fail. Sry.
export const Controls = observer(_Controls);
function _Controls(props: {store:Store}): any {
return <div>
<button onClick={() => props.store.addCount(2)}>Add 2 = {props.store.count}</button>
</div>;
}
export const Controls2 = observer(_Controls2);
function _Controls2(props: {store:Store}): any {
return <div>
<button onClick={props.store.getRest} title="add">Add Rest 3 = {props.store.count}</button>
</div>;
}
I am trying to click on element with this code:
test('no existed user try', async() => {
await page.click($x('//*[contains (text(), "people")]'))
})
It returns me an error $x is not a function
how to use xpath correct with click ?
test('no existed user try', async() => {
const elements = await page.$x('//*[contains (text(), "people")]');
await elements[0].click();
});
I am trying to test if an element is not present on a page.
I have tried using the following method, but I get an error each time:
Method:
expect(element(CastModule.PersonXpath).isDisplayed()).toEqual(false);
Error: Failed: Timed out waiting for Protractor to synchronize with the page after
seconds. Please see https://github.com/angular/protractor/blob/master/docs/f ...
What method do you recommend?
The error should not be related to the checking for the absence of an element. Try the following:
var elm = element(CastModule.PersonXpath);
expect(browser.isElementPresent(elm)).toBe(false);
See also:
In protractor, browser.isElementPresent vs element.isPresent vs element.isElementPresent
Yeah, testing for NOT visible can be sucky. You should be able to use isPresent(), which means in the dom, where isDisplayed() means it's actually visible, which I'm thinking is your issue. Try...
expect(element(CastModule.PersonXpath).isPresent()).toEqual(false);
You may also want to break this out into a method and use an Expected Condition.
The error doesn't look like it's to do with the element being displayed. It looks like it's to do with page synchronization. Try ignoring the sync, then waiting for angular above the expect with:
browser.ignoreSynchronization = true;
browser.waitForAngular();
expect(element(CastModule.PersonXpath).isDisplayed()).toEqual(false);
To check for visibility (in case isDisplayed or isPresent isn't working), just use:
if (!EC.invisibilityOf(ug.personXpath)) {
throw new Error("Partner logo is not displayed");
}
I managed to find out a solution, using the protractor library.
var EC = protractor.ExpectedConditions; browser.wait(EC.invisibilityOf(element(by.xpath(CastModule.PersonXpath))), 5000).then(function() {
if (EC.invisibilityOf(element(by.xpath(x.LanguagesXpath)))) {
console.log("Persons module is not present - as expected for this scenario");
} else {
throw new Error("Element STILL present");
}
});
});
You can also try below code to handle element displayed or not. Below code returns true or false according to the visibility of the element.
browser.wait(() => {
return element(by.className("claasName")).isDisplayed()
.then(
(hasDisplayed) => {
console.log("Has displayed: "+ hasDisplayed);
return hasDisplayed === false;
}
);
}, 5000)
.then(
() => {
return true;
},
() => {
return false;
}
)
To use presence of element use:
var elm = element(CastModule.PersonXpath);
elm.isPresent().then(function (present) {
if (present) {
element(CastModule.PersonXpath).then(function (labels) {
});
} else {
console.log('Element did not found');
}`enter code here`
expect(elem.isNull===undefined).to.be.equal(true);