I'm currently trying to do some very basic tests in regards to the input fields at https://whitelabel.sandbox.array.io/signup?platform=v3 but having trouble in Cypress in finding the form elements. The code I have is as follows:
describe('Verify identity data', () => {
it('Makes an assertion', function () {
cy.visit('https://whitelabel.sandbox.array.io/signup?platform=v3');
cy.get('input[name=firstName]');
});
});
However Cypress is giving me the error:
Timed out retrying after 4000ms: Expected to find element: input[name=firstName], but never found it.
Am I using the incorrect selector here? Any advice would be appreciated!
It is because you are using a shadow DOM
to access use .shadow https://docs.cypress.io/api/commands/shadow
describe("Verify identity data", () => {
it("Makes an assertion", function () {
cy.visit("https://whitelabel.sandbox.array.io/signup?platform=v3");
cy.get("array-account-enroll").shadow().find('input[name="firstName"]');
});
});
There's a shadow root in the DOM, but it's pretty high up in the DOM and likely to affect a lot of your commands.
Add a config setting to the test or to cypress.confi.js and you won't have to worry about appending every command.
describe("Verify identity data", {includeShadowDom: true}, () => {
it("Makes an assertion", function () {
cy.visit("https://whitelabel.sandbox.array.io/signup?platform=v3");
cy.get('input[name="firstName"]');
cy.get('input[name="lastName"]');
});
})
Related
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]')
I am trying to test the login functionalities using cypress, but for some reason I am unable to access the input text-box.
It shows Timed out retrying after 4000ms: Expected to find element: runner container, but never found it.
describe("User authentication", () => {
beforeEach(() => {
cy.visit("https://lmflf.com");
});
it("it takes to the correct page", () => {
cy.get('[data-field=password]')
});
});
I could see a shadow DOM in your webpage and in that case you have to use .shadow()(Cypress Docs). Your code would look something like:
cy.get('view-login').shadow().find('input[data-field="username"]').type('username', {force: true})
cy.get('view-login').shadow().find('input[data-field="password"]').type('password', {force: true})
cy.get('view-login').shadow().find('input[value="personal"]').click()
cy.get('view-login').shadow().find('.ViewLogin__button').click()
I'm trying to obtain the text from a element in protractor, and after doing something with the text, i want to click on the same element. This is what i have
HTML:
<span class="span-user" id="spanuser"> {{user?.login}}</span>
Protractor test:
describe('Login OK with correct pass', () => {
it('should login successfully with admin account', () => {
// logging
username.clear();
username.sendKeys('admin');
password.clear();
password.sendKeys('admin');
element(by.css('button[type=submit]')).click();
// check if the username <span> has the current login username
const expect2 = /admin/;
const spanuser = element(by.css('span#spanuser'));
spanuser.getText().then((value) => {
console.log('inside');
console.log(value ? value : 'no value');
expect(value).toMatch(expect2);
});
// then i try to click on the same span, to do some stuff
spanuser.click().then(() => {
console.log('It has been pressed!');
});
});
});
The first part works just fine, it gets the test and it passes the expect, but when i try to do the click() function on the span, i get the following error:
Failed: Timed out waiting for asynchronous Angular tasks to finish after 5 seconds. This may be because the current page is not an Angular application. Please see the FAQ for moredetails: https://github.com/angular/protractor/blob/master/docs/timeouts.md#waiting-for-angular
While waiting for element with locator - Locator: By(css selector,
span#spanuser)
What have i tried:
browser.waitForAngular() before spanuser.click()
browser.wait(10000) before spanuser.click()
also i have a waitForAngular() in the beforeAll function.
Does anyone has a idea on this? It doesn't really make any sense to me, why wouldn't find the same element that has already found before?
Thanks a lot!
add browser.waitForAngularEnabled('false') in onPrepare of protractor conf.js
onPrepare: function() {
browser.waitForAngularEnabled('false')
// if you set this in onPrepare(), it will be a global setting, will
// effect all script, so you no need to set it in other place.
}
use the jasmin defaulttimeoutinterval in config instead of manual sleep
jasmineNodeOpts: {
defaultTimeoutInterval: 250000
},
allScriptsTimeout: 180000
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
I'd like to verify the text content of a pseudo-element. The promise returned from using ptor.executeScript("window.getComputedStyle(jQuery('.my-class')[0], ':after').content").then(function(data){
console.log(arguments) // {'0':null}
});
I've also tried dropping that in the expectation, but I'd guess that fails for the same reason.
Since the CSS Declaration for this is pointing at one of the element's attributes anyway, should I just try to read that attribute?
executeScript will waits for you to return a value - so you'll need to do:
ptor.executeScript("return window.getComputedStyle(jQuery('.my-class')[0], ':after').content")
.then(function(data){ console.log(arguments)});
As an updated answer based up the one from our good friend Julie aka "Protractor Wizard."
I didn't have jQuery available to get my pseduo-element so I did this...
describe('#swPopover Component', () => {
it('should show the popover message when hovered', () => {
browser.actions().mouseMove(objectsPage.popover).perform();
browser.executeScript('return window.getComputedStyle(document.querySelector(".sw-popover"), ":after").content')
.then(data => expect(data).toBe('"I am the popover text"'));
});
});