storybook add message to interaction testing? - testing

I was wondering if it is possible to add a message instead of showing the values when the interactions tests are run in storybook.
for example:
FilledForm.play = async ({ canvasElement }) => {
const buttonEl = getByRole('button')
await expect(buttonEl.textContent).toContain('some button text');
//this gives `expect('some button text').toContain('some button text')`
//would have been better if it gave: `expect textContent to contain 'some button text'`;
any clue if that is possible? FYI it is not a deal breaker for me, it a cheaper alternative to have the test-runner and it works on a case by case, just want to know if there is a way to put extra message when showing the test result.

Related

playwright find child element(s) within locator

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.

Unable to use short cut keys (hotKeys)

I am writing e2e tests in NightWatch v2.1.3 using page objects.
There are list of items, and an item can be selected either by click or by hotKey of its index.
Example: second element can be selected by click or shift+2.
Following code i have written, taking reference from the docs, but it is not working
browser.perform(function () {
const actions = this.actions({async: true});
console.log('performing hotKeys');
actions
.click('#option1')
.keyDown(Keys.SHIFT)
.keyDown(Keys.NUMPAD2)
.keyUp(Keys.NUMPAD2)
.keyUp(Keys.SHIFT);
});
Console is happening but the click and keyUp, keyDown is not working, when kept inside the .perform method.
What need to be fixed here?
return keyword is important. (silly mistake here)
Use 'a', 'b', '1', '2' for normal keys (single quotes are important, even for numbers)
click is not working, inside actions api. Better use the api click instead of userActions click. No idea why this click is added under new user-actions. The documentations does not have enough examples, one need to find out through hit and trial method.
Example:
For SHIFT + 1
browser
.pause(3000)
.perform(function () {
const actions = this.actions({ async: true });
return actions
.keyDown(Keys.SHIFT)
.keyDown('1')
.keyUp('1')
.keyUp(Keys.SHIFT);
})
.pause(2000);
For Shift + 10
(This depends on the way feature is developed, if app need both 1 and 0 to be pressed or not)
browser
.pause(3000)
.perform(function () {
const actions = this.actions({ async: true });
return actions
.keyDown(Keys.SHIFT)
.keyDown('1')
.keyUp('1')
.keyDown('0')
.keyUp('0')
.keyUp(Keys.SHIFT);
})
.pause(2000);
// keyUp('10') wont work, it is not a valid key in your keyboard
For simple 'a'
(This depends on the way feature is developed, if app need both 1 and 0 to be pressed or not)
browser
.pause(3000)
.perform(function () {
const actions = this.actions({ async: true });
return actions
.keyDown('a')
.keyUp('a')
})
.pause(2000);

Is there a way I can find an element in a FlatList using Detox E2E testing

So while testing my application, I am using a data set. Since the data set has many entries, I am using FlatList to display my list. After creating the list, I want to be able to verify and tap on certain list items. Below, I have attached the code which I am trying to use and it does not work for me. If anyone has a better idea to do this, please let me know.
The approach I think should be taken. I can't think of anything else to make the FlatList scroll and find the item I am looking for.
let isNotFound = true;
while (isNotFound) {
try {
await waitFor(element(by.id((edit_details.index).toString()))).toBeVisible().withTimeout(2000)
isNotFound = false;
} catch (e) {
await element(by.id('credit_history_list')).swipe('up', 'slow', 0.2)
}
}
await element(by.id((edit_details.index).toString())).tap();
It does help scroll the list and it keeps scrolling while it actually finds the entry I am looking for. But the .tap() function does not work. Instead, detox moves on with the next line of code.
Is there a better way to do this?
Thanks in advance!
This sounds spot-on with Detox' whileElement() API.
I think that what you're looking for is this:
const itemId = (edit_details.index).toString();
const listId = 'credit_history_list';
await waitFor(element(by.id(itemId))).toBeVisible()
.whileElement(by.id(listId))
.scroll(100, 'down');

Cycle through test data from within a Testcafe test? How to?

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);
}

Checking button text matches a certain string in Nightwatch.js

I'm having a heck of a time trying to write a test where I check that text on a button matches a certain string. I tried ".valueContains", ".attributeContains" and got blank or null, and I've tried getText(), but that only seems to return an object.
I feel like it's something obvious I'm missing, so any help would be appreciated!
Based on what you have written so far in your question, I am wondering if there is there a reason you cannot use .containsText?
.waitForElementVisible('.yourclass', this.timeout)
.assert.containsText('.yourclass', 'Text of Button you expect to match')
http://nightwatchjs.org/api#assert-containsText
Without actually looking at the code its little difficult to predict whats going on. However all of the methods in selenium return a promise, so you need to wait for it to resolve.
function async getTextOfButton() {
const element = await driver.findElement(By.className('item-class'));
const text = await element.getText();
}
If you are not using async/await you could do
driver.findElement(By.className('item-class')).then(function(element) {
element.getText().then(function(text) {
console.log(text);
});
});