As per my application, clicking on one of the links can open one of the URLs from two URLs.
Eg: Clicking on Link - X, it can open one of the below URLs :
http://example.com/value1 or http://example.com/value2
I have to write an .contains assertions for this which can look something like this:
expect(currentUrl).contains(value1 or value2)
As per the TestCafe documentation, contains does not have support for a regular expression and I do not want to use Match as I have to pass incomplete URL there.
Please let me know how this can be done.
Thanks.
I have solved it using match assertion as below but still it would be good if this can be somehow done with contain assertion as well.
expect(currentUrl).match(/value1|value2$/)
Check the following "current location" example test:
import { ClientFunction } from 'testcafe';
fixture `Fixture`
.page `https://google.com`;
test('Check location', async t => {
// Some actions and assertions...
await t
.navigateTo(/*...*/)
.click(/*...*/);
// Then check our location
const getLocation = ClientFunction(() => document.location.href);
const location = await getLocation();
await t
.expect(location.includes('microsoft') || location.includes('google')).ok();
});
Related
I'm trying to write a function to find child(ren) element(s) within a locator something like:
async findElements(locator: Locator){
return locator.querySelector(some/xpath/or/css);
}
However, I'm seeing the querySelector is not available in Locator. What is the equivalent of querySelector?
I figured it out,
locator.locator(some/xpath/)
I have just started working with playwright. So this may not be the exact answer that are looking for.
I am studying playwright with an existing repository.
[https://github.com/twerske/ng-tube/blob/main/src/app/video-grid/video-grid.component.html]
In this scenario I just want to know that I am getting a list of cards back.
<div class="videos-grid">
<mat-card *ngFor="let video of videos" class="video-card">
I don't need a reference to a parent for this situation. I am able to simply reference the child by class videos-grid. This all exists inside of a angular's For loop. I know Svelte and other frameworks iterate through lists in different ways.
test.only('ngTube has header and cardList', async ({browser}) => {
const page = await browser.newPage();
const context = await browser.newContext();
await page.goto("http://localhost:4200/")
const title = await page.locator('.header-title').textContent();
const videoList = (await page.locator('.video-card').allTextContents()).length;
// await page.pause();
expect(title).toStrictEqual('ngTube');
expect(videoList).toBeGreaterThan(0)
})
Because I want all text contents I can get everything with the classname '.video-card'.
I guess what I am getting at is as long as you can access an identifier you should be able to directly access it. As I run through the documentation more and scenarios I will update/add to this answer.
Tried automating dropdown using the below methods but the dropdown values couldn't be selected.
Method 1:
const comboOption = Selector("mat-option").child("span").withExactText("Hello");
await t.click(comboOption);
Method 2:
ClientFunction(() => {
document.getElementsByClassName('mat-option-text')[0].innerText = 'Hello';
document.getElementsByClassName('mat-option-text')[0].click();
return "Hello";});
The mat-option tag is not within mat-select. It is outside mat-select and within div tag.
Are there other ways to achieve automating mat-option ?
Thank you for the code snippets.
As far as I understand, you are trying to click an option element in another select element.
I created a simple test that should perform the steps you described:
import { Selector } from 'testcafe';
fixture`Getting Started`
.page`http://devexpress.github.io/testcafe/example`;
const selectElement = Selector('#preferred-interface');
const optionElement = selectElement.find('option');
test('My first test', async t => {
await t
.click(selectElement)
.click(optionElement.withText('Both'))
.expect(selectElement.value).eql('Both');
});
If I misunderstood your question, could you please share a simple example of your .html and a detailed description of
what you want to do in the test and which results you expect?
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'm wanting to log into an app, run several searches from test data, then log out. I don't want to login and out for each item in the data set, which would be the case if I coded this way...
dataSet.forEach(data =>{
test('Search Test', async t => {......
I would like to be able to...
test('Search Test', async t => {......
foreeach(data in Data set)
call a function to search
call a function to verify search return.
Something like this...
test('Simple Search Test', async t => {
//await t
await loginPage.login(loginName, password);
await t
.expect(getURL()).contains('home')
// Check logged in user display...
.expect(pageHeader.userName.withText(data.loggedInUser).visible).ok()
dataSet.forEach(data =>{
leftSidebar.searchWithCriteria(data.criteria, 'Filename');
recordNav.verifyTotal(data.srchresult);
});
// Log out
await pageHeader.logout();
await t
.expect(loginPage.copyRight.visible).ok();
});
enter code here
I've tried everything, but can't get it to work. Is this possible or does the entire test have to be run for each data record in the set?
TestCafe allows you to loop through test code in any manner, including iterating through custom data.
To help us determine why this does not work for you, please provide an example that I can run on my machine (including the test code, page object, and the tested page's URL).
I got it to work using this...
for (var i = 0; i < dataSet.length; i++){
leftSidebar.searchWithCriteria(dataSet[i].criteria, 'Filename');
recordNav.verifyTotal(dataSet[i].srchResult);
}
I am reading through the documentation in Cypress and I think I have an idea as to what then() does. It works like promises, where a promise returns another promise, but with then(), we are returning a new subject.
If we look at the code example below, we are using then() because we are returning a new variable, which in this case is called target.
Am I understanding this correctly? If not, can someone correct me?
it.only('Marks an incomplete item complete', () => {
//we'll need a route to stub the api call that updates our item
cy.fixture('todos')
.then(todos => {
//target is a single todo, taken from the head of the array. We can use this to define our route
const target = Cypress._.head(todos)
cy.route(
"PUT",
`api/todos/${target.id}`,
//Here we are mergin original item with an object literal
Cypress._.merge(target, {isComplete: true})
)
})
.then is used to receive the results from cy.fixture('todos'). The variable target is not significant in this code.
In your code sample, the variable that is returned from cy.fixture is named todos - the spacing of the code may be throwing you off here? The .then call is attached to the cy.fixture() call
// These 2 code blocks are the same - just different spacing
cy.fixture('todos')
.then(todos => {});
cy.fixture('todos').then(todos => {});
https://docs.cypress.io/api/commands/fixture.html#Usage
cy.fixture('logo.png').then((logo) => {
// load data from logo.png
})
Using .then() allows you to use the yielded subject in a callback function and should be used when you need to manipulate some values or do some actions.
To put it simply, it is used to play around with the yield of the previous command and work around with it in that case. THEN() command is handy and helpful in debugging the yield of the previous command.
const baseURL = "https://jsonplaceholder.typicode.com";
describe("Get Call-Expect+ normal req", () => {
it("GetPostById-Expect", () => {
cy.request(baseURL + "/posts/1").as("GetPostById");
cy.get("#GetPostById").then((response) => {
//response: status
expect(response.status).to.equal(200);
expect(response.status).to.eq(200);
});
});
Refer: https://docs.cypress.io/api/commands/then#Promises