I'm getting no such element error over and over again. I'm working with error more than 7 hours. Dom has the id. But i get error 'no such element'. Here's my code:
describe("Amazon", () => {
it("Search amazon", () => {
browser.url("https://www.amazon.com.tr/");
let searchField = $("#twotabsearchtextbox");
const submit = $("#nav-search-submit-button");
searchField.setValue("mouse");
submit.click();
});
});
And here's the log:
Screenshot of the log
Thanks everyone
This probably means that you are not working in the correct context. You should check if the element is located inside an iframe.
If it's the case, you will need to switch to this iframe context before being able to query the element. You can do so using the WebDriver API 'switch to frame' (W3C webdriver spec) which is available through the webdriver.io API switchToFrame.
Related
I'm currently doing some automation, and I'm having trouble getting over the Plaid iframe. This how it looks inside of my app:
This how is setup inside of my app:
<div class="PaneActions PaneActions--no-padding-top"><button
class="TextButton TextButton--is-action TextButton--is-threads-treatment TextButton--no-margin">
<p class="FinePrint FinePrint--is-threads-treatment">By selecting “Continue” you agree to the <u>Plaid End User
Privacy Policy</u></p>
</button><button
class="Touchable-module_resetButtonOrLink__hwe7O Touchable-module_block__WBbZm Touchable-module_wide__EYer3 Button-module_button__1yqRw Button-module_large__1nbMn Button-module_centered__3BGqS"
id="aut-continue-button" type="button" role="button"><span class="Button-module_flex__2To5J"><span
class="Button-module_text__38wV0">Continue</span></span></button></div>
I'm getting the parent and the child elements, I'm looking by the text, and many other options and I'm unable to test this product. Does anyone has been working with plaid before?
Using the Plaid demo page as a test app and following the steps in Working with iframes in Cypress, I managed to get a consistently working test.
From the blog, I used this sequence to ensure the iframe body has fully loaded
iframe -> body -> should.not.be.empty
The page loads a placeholder first while is waits for a GET request to complete, so just getting a loaded iframe body is not sufficient.
placeholder
<p>iframe placeholder for https://cdn.plaid.com/link/v2/stable/link.html?isLinkInitialize=true&origin=https%3A%2F%2Fplaid.com&token=link-sandbox-170bce6a-fe90-44a4-8b8a-54064fbc8032&uniqueId=1&version=2.0.917</p>
We need to wait for the "Continue" button, which takes a bit of time to show so give it a long timeout.
Using .contains('button', 'Continue', { timeout: 10000 }) actually returned two button, although there is only one visible.
I changed the button selector to use an id and all works consistently.
The test
cy.visit('https://plaid.com/demo/?countryCode=US&language=en&product=transactions');
cy.contains('button', 'Launch Demo').click()
cy.get('iframe#plaid-link-iframe-1', { timeout: 30000 }).then(iframe => {
cy.wrap(iframe) // from Cypress blog ref above
.its('0.contentDocument.body')
.should('not.be.empty') // ensure the iframe body is loaded
.as('iframeBody') // save for further commands within iframe.body
//.contains('button', 'Continue', { timeout: 10000 }) // returns 2 buttons!
.find('button#aut-continue-button', { timeout: 10000 }) // this is the best selector
.click()
cy.get('#iframeBody')
.contains('h1', 'Select your bank') // confirm the result of the click()
})
You will have to do the call for your app link
You will have to add the following code:
describe('Plad Testing', () => {
it('Request Loan', () => {
//cy.find('Button-module_large__1nbMn', [0], { timeout: 10000 }).click()
cy.visit('https://plaid.com/demo/?countryCode=US&language=en&product=transactions');
cy.contains('button', 'Launch Demo').click()
cy.get('iframe#plaid-link-iframe-1', { timeout: 30000 }).then(iframe => {
let plaid = cy.wrap(iframe)
plaid // from Cypress blog ref above
.its('0.contentDocument.body')
.should('not.be.empty') // ensure the iframe body is loaded
.as('iframeBody') // save for further commands within iframe.body
//.contains('button', 'Continue', { timeout: 10000 }) // returns 2 buttons!
.find('button#aut-continue-button', { timeout: 10000 }) // this is the best selector
.click()
let plaid_choose_bank = cy.get('#iframeBody')
plaid_choose_bank
.contains('h1', 'Select your bank') // confirm the result of the click()
.xpath('/html/body/reach-portal/div[3]/div/div/div/div/div/div/div[2]/div[2]/div[2]/div/ul/li[1]/button/div/div[2]/p[1]').click()
let plaid_bank_username = cy.get('#iframeBody')
plaid_bank_username
.find('input[name="username"]').type('user_good', { delay: 100 })
let plaid_bank_password = cy.get('#iframeBody')
plaid_bank_password
.find('input[name="password"]').type('pass_good', { delay: 100 })
let plaid_bank_button = cy.get('#iframeBody')
plaid_bank_button
.find('button#aut-submit-button').click()
})
})
})
It could be possible that you get that you are not able to find the body of your iFrame. To solve this issue, we will need to add some configuration to the Cypress.json file:
{
"chromeWebSecurity": false,
"pageLoadTimeout": 300000,
"viewportWidth": 1536,
"viewportHeight": 960,
"includeShadowDom": true,
}
Chrome web security will prevent any CORS security from fire-up inside of the current test scenario that we have since you will have that 0.contentDocument.body will return null if the parent origin is different from the iframe origin. This will cause the CORS security issue!
Page load time will help to slow loading the pages and have more time to process things
Viewport will help to make the browser window render like a laptop screen
Include shadow dom will make it easier to look for this type of element without including the "includeShadowDom" inside of your find() elements.
All of the other answers here use *.plaid.com as the origin, which is why contentDocument is not null.
If you are testing this in the real world, you will be running a cross-origin iframe which causes contentDocument to be null a per the MDN page
Cypress is in the process of adding official iframe support, but until then you can use cypress-iframe which just worked for me out of the box.
My test
it.only('users should be able to import holdings from their broker', () => {
cy.visit('/portfolios/created');
cy.findByText('Import from broker').click();
cy.frameLoaded();
cy.iframe().findByText('Continue').click();
});
I am getting to grips with Cypress. Loving it so far, however, I have got stuck with the following.
I want to test that when a button is clicked, the user is directed to the correct external site. This works fine (at the moment) using the following code:
$("#my-button").click(function() {
var external_url = 'https://www.somesite.com/';
if($("#my-checkbox").prop("checked")) {
external_url += 'foo';
} else {
external_url += 'bar';
}
window.location.href = external_url;
return false;
});
Starting small within a Cypress spec:
it('Should direct to external site depending on checkbox state', () => {
cy.get('#my-button').click()
})
Receives Cypress Error:
Cypress detected a cross origin error happened on page load:
Blocked a frame with origin "http://localhost:8888" from accessing a cross-origin frame.
This is fair enough, and I understand why I get the error. I don't want to disable Chrome Web Security to get around it.
Can someone show me how I should test this use case?
I think I should be trapping the location change with cy.stub() and/or cy.on() but so far I have not had success:
it('Should direct to external site depending on checkbox state', () => {
cy.stub(Cypress.$("#my-button"), "click", () => {
console.log('stub')
})
cy.on("window.location.href", win => {
console.log('on')
})
cy.get('#my-button').click()
})
The button click still results in the error being thrown as the script still attempts to set the location to an external site.
I am trying to assert a text that's seen on a media gallery overlay page. All I want is for the code to verify if the text is present and if so, assets it matches the expected text.
For some reason, I keep getting failed tests. Below is the code I have written in Visual Code:
let expSuccessARMessage = "See it in Your Space (Augmented Reality) is currently only available using an AR compatible Apple device (iOS 12 or above)."
let successARMessage = browser.getText(page.pageElements.arMessage);
console.log(successARMessage);
assert(successARMessage === expSuccessARMessage, 'Success message');
What am I missing here?
Not a magician, but you should be getting browser.getText is not a function error in the console, because the getText() method is defined inside the element object, not the browser object. Read the complete API log here.
So your code should be:
let expectedText = "Your long text here"
let foundText = $(page.pageElements.arMessage).getText();
// Considering 'page.pageElements.arMessage' is a valid selector for targeted element
console.log(`Found the following text: ${foundText}`);
assert.equal(expectedText, foundText, 'This is actually the ERROR message');
I want to add to the answer that there can also be a browser object centric approach, using the webdriver protocol API. Thus, our code becomes:
let expectedText = "Your long text here"
let elementObject = browser.findElement('css selector', page.pageElements.arMessage);
// Considering 'page.pageElements.arMessage' is a valid selector for targeted element
let foundText = browser.getElementText(elementObject.ELEMENT);
console.log(`Found the following text: ${foundText}`);
assert.equal(expectedText, foundText, 'This is actually the ERROR message');
The latter approach is obsolete IMHO, and the recommended approach for WebdriverIO v5 would be using $, respectively $$ (element & elements). But wanted to give you a broader perspective.
If you defined the element into object repository like:
get OtpDescriptionText () { return '//div[#class="otp-description"]'; }
In order to console or assert/expect that element you need to use like:
let elem1 = await $(RegistratonPage.OtpDescriptionText);
console.log(await elem1.getText());
or
await expect($(RegistratonPage.OtpDescriptionText)).toHaveTextContaining('We just need to check this phone number belongs to you.')
If you don't use $, error is thrown
I am developing an office web addin, and running in Word Online.
I am trying to edit a document that I have created with context.application.createDocument. Here is the code:
Word.run(function (context) {
var myNewDoc = context.application.createDocument(base64);
context.load(myNewDoc);
return context.sync().then(function () {
myNewDoc.body.insertText('Hello World!', 'Start');
myNewDoc.open();
return context.sync();
});
});
I get this error at insertion of text / context.sync():
GeneralException The action isn’t supported in Word Online. Check the
OfficeExtension.Error.debugInfo for more information. statement: var
body=v.body;
Please help.
This error is by design. On the newly created document, you can only call open methods. All others methods are not supported which means you can't operate the newly created document.
I'm new to Selenium and I'm running my selenium script on Browserstack.
Everything works fine, until i reach the bottom 10% of my page.
I get the following error:
Uncaught WebDriverError: Appium error: unknown error: Element is not clickable at point (20, 324). Other
element would receive the click: ...
(Session info: chrome=58.0.3029.83)
(Driver info: chromedriver=2.29.461571 (8a88bbe0775e2a23afda0ceaf2ef7ee74e822cc5),platform=Linux
3.19.8-100.fc20.x86_64 x86_64)
This is my code:
describe.only(testTitle, function () {
before(function () {
driver = driverConfiguration.getDriverConfiguration(testTitle, 'chrome')
})
after(function (done) {
driver.quit().then(done)
})
it('Sample tests', function (done) {
driver.get('https://www.test.com').then(function(){
driver.findElement(webdriver.By.name('cardNumber')).sendKeys('0000000000').then(function(){
driver.findElement(webdriver.By.id('billingLine1')).sendKeys('test');
driver.findElement(webdriver.By.id('billingLine2')).sendKeys('test');
driver.findElement(webdriver.By.id('billingCity')).sendKeys('San Jose');
driver.findElement(webdriver.By.id('agree')).click(); // ERROR!!!!!
}).then(function() {
driver.quit().then(done);
})
});
})
})
When I do the following:
// return driver.wait(function() {
// return driver.findElement(webdriver.By.id('agree')).isDisplayed();
// }, 1000);
It says True. The element is visible.
Using Chrome on Samsung Galaxy S8
I'm not sure how to solve this problem.
You've omitted the most important part of the error message in your question
Other element would receive the click: ...
The element in the ... section was the element that was blocking the click. As you discovered, Selenium was reporting that the element was displayed/visible. This error message is just stating that when Selenium attempted to click on the element, another element was blocking the click. If you take a look at the HTML of the blocking element and search that in the HTML of the page, you should be able to identify the element. In my experience, it's a dialog or maybe a banner at the bottom of the page, etc. Sometimes you will need to close it, other times you will need to scroll down/up a little to get the desired element from behind the blocking UI.
Continued from comments above ...
I encountered this problem as well, when I needed to click a button but it was not visible on the screen (however, it was detected by the code).
To resolve this, I used the WebDriver's executeScript() method to run some JavaScript on the page to scroll until my button was in view.
driver.executeScript(`
var target = document.getElementById('agree');
var tarTop = target.getBoundingClientRect().top;
document.body.scrollTop = tarTop;
`);
You can try driver.executeAsyncScript() if you want want to add a timeout to the scroll, to make sure the page has reached its destination first. At that point you'll be using async/await...
await driver.executeAsyncScript(`
var callback = arguments[arguments.length - 1];
var target = document.getElementById('agree');
var tarTop = target.getBoundingClientRect().top;
document.body.scrollTop = tarTop;
setTimeout(()=>{ callback( true ); }, 1500);
`).then((data)=>{
return data;
});