LoginPage.js
class Login{
elements =
verifyUserName(verifyUserName){
this.elements.verifyLogin().should('have.text',verifyUserName);
}
}
//export default Login;
export default new Login();
LoginTest.cy.js
import Login from "../PageObjects/LoginPage";
describe('Page Object Model Pattern in Cypress', () => {
beforeEach(() => {
cy.visit('/')
});
it('Should Login to Home Page Test', () => {
cy.fixture('testData').then((data) => {
Login.verifyUserName(data.expectedusername)
})
})
})
HTML of the element-
<span id="nav-link-accountList-nav-line-1" class="nav-line-1 nav-progressive-content">Hello, S*****N</span>
When I'm trying to run these two files in cypress getting assertion error
"assertexpected <span#nav-link-accountList-nav-line-1.nav-line-1.nav-progressive-content> to have text Hello, S****N".
Basically it's fetching the id & class and asserting with the expected text. Can anyone please suggest any solutions? TIAyour text
I understood that you need to grab text of an element and assert that grabbed text is equal to some expected text.
//grabbed element via Id and saved into $ele using .then command
cy.get("#nav-link-accountList-nav-line-1").then(($ele) => {
//grabbed text value of the element in const txtvalue
const txtValue = $ele.text()
//did chai assertion to be equal to expected text
expect(txtValue).to.be.eq("Hello, S*****N")}
Related
I am trying to use AsyncSelect from react-select library.
I have enabled cacheOptions option.
Using below mentioned steps I am seeing an issue with loadOptions
Search for a string test
List of options gets displayed
Clear the input field
Enter same string again test
Immediately displays same list of options
loadOptions fires an API with search input tes
Clear the input field
Enter same string again test
Immediately displays same list of options
loadOptions fires API with search input te.
I am not sure why loadOptions getting fired in this scenario if I am entering the same search string.
Here is the AsyncSelect
<AsyncSelect
classNamePrefix="select-item"
onChange={ onOptionSelect }
getOptionValue={ item => item.id }
placeholder="Search by Item"
formatOptionLabel={ company => <CompanyWithIcon Item={ Item } /> }
loadOptions={ loadOptions }
styles={ customStyles }
isSearchable
cacheOptions
isClearable
/>
Here is the loadOptions function
const loadOptions = inputValue => searchItem(inputValue);
Can anybody please help?
I think it is happening because you are not using a callback or a promise for loadOptions. The loadOptions should return a promise.
Reference doc -> https://react-select.com/props#async-props says:
loadOptions:
Function that returns a promise, which is the set of options to be used once the promise resolves.
It should be like below:
const loadOptions = (inputValue, callback) => {
setTimeout(() => {
callback(searchItem(inputValue));
}, 1000);
};
Let's say I have this in a test:
await t.expect(Selector('input')).ok()
And I would like to have (something like) this:
let func = 'ok';
await t.expect(Selector('input'))[func]()
This is so that I can have a map from selector to function, in order to iterate
over it and check whether some elements are in the page (ok) and some not (notOk).
My above attempt does not work and returns with an interesting error:
code: 'E1035',
data: [
'SyntaxError: test.js: await is a reserved word (325:14)'
]
I believe this is because Testcafe is doing some magic under the hood.
What would be the correct syntax to make it work?
It seems that you skipped the Selector property that you want to check (e.g. exists, visible, textContent, etc.). The following test example works properly with TestCafe v1.14.2:
import { Selector } from 'testcafe';
fixture`A set of examples that illustrate how to use TestCafe API`
.page`http://devexpress.github.io/testcafe/example/`;
const developerName = Selector('#developer-name');
const submitButton = Selector('#submit-button');
test('New Test', async t => {
await t
.typeText(developerName, 'Peter Parker')
.click(submitButton);
let assertFunc = 'ok';
await t.expect(Selector('#article-header').exists)[assertFunc]();
});
I am using Protractor for e2e testing. The tests should first enter too short username and passwords and because of Angular validators when clicked on a submit button (which is disabled) get rejected and stay put (this works!), then it should enter an username of correct length with also a password of a correct length, click on the submit button and NOT get redirected, because it's a false login. This fails... The last test requires to input correct login details and click on submit and should get redirected to the dashboard.
According to this answer https://stackoverflow.com/a/21785088/12360035 is all it would take to solve my problem that seems to throw the
- Failed: script timeout
(Session info: chrome=79.0.3945.130)
(Driver info: chromedriver=79.0.3945.16 (93fcc21110c10dbbd49bbff8f472335360e31d05-refs/branch-heads/3945#{#262}),platform=Windows NT 10.0.18362 x86_64)```
error for both of my tests.
How do I fix this?
My tests are written this way:
it('should enter too short username and password and NOT get redirected => stay put', () => {
element(by.css('#inputUser')).sendKeys('bah');
element(by.css('#inputPassword')).sendKeys('bah');
const btn = element(by.css('#loginSubmit'));
btn.click();
const curUrl = browser.getCurrentUrl();
expect(curUrl).toBe('http://localhost:4200/avior/login');
});
it('should enter incorrect username and password and NOT get redirected => stay put', () => {
const ele1 = element(by.css('#inputUser'));
const ele2 = element(by.css('#inputPassword'));
const btn = element(by.css('#loginSubmit'));
ele1.clear();
ele2.clear();
ele1.sendKeys('bah');
ele2.sendKeys('bahbahbah');
btn.click();
browser.waitForAngular();
const curUrl = browser.getCurrentUrl();
expect(curUrl).toBe('http://localhost:4200/avior/login');
});
it('should enter correct username and password and get redirected to /avior/dashboard', () => {
const ele1 = element(by.css('#inputUser'));
const ele2 = element(by.css('#inputPassword'));
const btn = element(by.css('#loginSubmit'));
ele1.clear();
ele2.clear();
ele1.sendKeys('Chad');
ele2.sendKeys('chadchad');
btn.click();
browser.waitForAngular();
const curUrl = browser.getCurrentUrl();
expect(curUrl).toBe('http://localhost:4200/avior/dashboard');
});
UPDATE
A jwt token is sent as a cookie in response, that might be part of the problem. I can't seem to find info online on how to handle cookies with Protractor..
Waits in Protractor
Wait for the element to Present
this.waitForElementPresent = function (element) {
return browser.wait(() => (element.isPresent()), 30000);
}
Wait for the element to Display
this.waitForElementDisplayed = function (element) {
return browser.wait(() => (element.isDisplayed()), 30000);
}
Sleep Condition
this.sleep = function (sec) {
browser.sleep(sec * 1000);
}
Expected Conditions
this.waitForElementVisibility = function () {
let EC = ExpectedConditions;
return browser.wait(EC.visibilityOf(), 30000);
}
According to this question Failed: script timeout: result was not received in 11 seconds From: Task: Protractor.waitForAngular() - Locator: By(css selector, #my-btn) adding browser.waitForAngularEnabled(false); before the button clicks seems to have solved the errors..
I'm learning protractor and i came across with an issue selecting a given value from an Autocomplete.
How can i click a given string which has following source code using the protractor
I'm practicing in the following URL: https://material.angular.io/components/autocomplete/overview#option-groups
Protractor is only able to interact with elements present in the DOM of the page. The elements for the underlying state options will not be loaded into the DOM until the input box for the State Group has been interacted with.
You can select the Maine option as follows:
app.js
describe('desribe the test', () => {
it('the it', async () => {
await browser.get('https://material.angular.io/components/autocomplete/overview#option-groups');
let statesGroupField = element(by.xpath('//input[#placeholder="States Group"]'));
await statesGroupField.click();
let maineDropdownOption = element(by.xpath('//span[text()="Maine"]'));
await maineDropdownOption.click();
await browser.driver.sleep(5000);
})
})
So just a brief overview, I'm unable to send keys to a edit text field for android. I've successfully sent keys to this element via browser but in order to test the mobile application fully, I'd like to run e2e tests on a device using Appium.
I've successfully got Appium to click button elements but am having a hard time getting it to send keys to an edit field element.
Am I able to find elements by model when testing with android as I have set in my forgot-pin-page.js?
pin-reset-page.js
var pinResetPage = function() {
describe('The Reset Pin Flow', function () {
forgotPinPage = forgotPinPageBuilder.getForgotPinPage(),
describe('The Forgot Pin Page', function () {
it('should allow the user to enter their MSISDN and continue',
function () {
forgotPinPage.enterMsisdn('123123123');
forgotPinPage.doForgotPin();
expect(securityPage.isOnSecurityPage()).toBe(true);
});
});
}
forgot-pin-page.js
'use strict';
var ForgotPin = function () {
var forgotPinPageContent = element(by.id('forgot')),
msisdnInput = element(by.model('data.msisdn')),
return {
enterMsisdn: function (msisdn) {
return msisdnInput.sendKeys(msisdn);
}
};
module.exports.getForgotPinPage = function () {
return new ForgotPin();
};
The error i'm getting is
? should allow the user to enter their MSISDN and continue
- Error: Timeout - Async callback was not invoked within timeout spe
cified by jasmine.DEFAULT_TIMEOUT_INTERVAL.
Not sure if this is the correct solution but it worked for me. I downgraded jasmine2 to jasmine and that seemed to resolved the async timeouts I was having.