conditional testing in cypress - testing if element exist - automation

in my automation, I'm trying to find an element with a specific text on a page.
to be more specific: every page is a movie info page and has a list of actors and I'm trying to find a specific actor.
if found I will count it - count ++.
if not I will move to the next page and try to find it there.
again and again, until I searched all of the pages.
The problem I encountered is how to get the text of the elements, and whenever the automation does not find the text it crashes.
the element : <a data-testid="title-cast-item__actor" href="/name/nm2794962?ref_=tt_cl_t_1" class="StyledComponents__ActorName-y9ygcu-1 eyqFnv">Hailee Steinfeld</a>
the one thing that separates the identification of the elements is the inner text (the name of the actor)

Something like this:
let x = 0;
cy.visit('/your/pages')
cy.get('[data-testid="title-cast-item__actor"]')
.contains('Hailee Steinfeld')
.then(() => cy.log(`Count: ${++x}`));
or with visiting all your pages:
let x = 0;
const pages = ['/page1', '/page2'];
cy.wrap(pages).each((page) => {
cy.visit(page);
cy.get('[data-testid="title-cast-item__actor"]')
.invoke('text')
.then((text) => {
cy.log(`Actor: ${text}`);
if (text === 'Hailee Steinfeld') {
x++;
}
return cy.wrap(x);
})
}).should('be.greaterThan', 0);
But be aware that conditional testing is something that is not recommended by cypress. See https://docs.cypress.io/guides/core-concepts/conditional-testing#The-problem

Related

How to read values from a view to insert in ratingValue and ratingCount in my web in order to be recognized by Google Structured data testing tool?

I was using an external service to get Aggregate Rating in my recipes blog, but dis service disappeared so I decided to build one myself. First of all, this is my first experience with cloud data and JavaScript programming so please, be paciente with me :-).
I'm doing my experiments in this duplicate of my blog: https://jleavalc.blogspot.com/
by now it works as I planned, letting one to vote and storing results in a oracle table, making it possible to retrieve results from a view of this table to get ratingCount and ratingValue values, as anyone can see in that link...
But at the end, despite you can see the stars, despite you can vote and get result stored, showing voting results, Structured data testing tool don't see tag values, so all work is useless.
I think I'm getting close to the problem, but not getting close to the solution. I have the impression that the cause of my problems is the asynchrony of the execution of the script that brings the data from the table, while the function is executed, the browser continues to render the page and it doesn't arrive in time to write those values ​​before the google tool can read them, so they appear empty to it.
I have tried everything including labels and variables in GTM with the same result. The latest version of the code, from this morning is installed right before the "/head" tag and it looks like this:
<script style='text/javascript'>
var myPostId = "<data:widgets.Blog.first.posts.first.id/>";
// <![CDATA[
var micuenta = 0;
var nota = 0;
getText("https://ge4e65cc87f573d-XXXXXXXXXXXX.adb.eu-amsterdam-1.oraclecloudapps.com/ords/admin/notas/?q={\"receta\":{\"$eq\":\"" + myPostId + "\"}}");
async function getText(file) {
let x = await fetch(file);
let y = await x.text();
let datos = JSON.parse(y);
nota = datos.items[0].media;
micuenta = datos.items[0].votos;
};
// This version gives the same result and is interchangeable with the previous one. I keep it commented so as not to forget it:
// var settings = {
// "url": "https://ge4e65cc87f573d-db20220526112405.adb.eu-amsterdam-1.oraclecloudapps.com/ords/admin/notas/?q={\"receta\":{\"$eq\":\"" + myPostId + "\"}}",
// "method": "GET",
// "timeout": 0,
// "async": false,
// };
// $.ajax(settings).done(function (response) {
// if (response.items.length != 0) {
// micuenta = response.items[0].votos;
// nota = response.items[0].media;
// }
// });
</script>
The key is, I think, getting this call to execute before Google's tool finishes rendering the Blogger post page.
The URL that I invoke to get the data calls an oracle view that returns a single row with the corresponding data from the recipe, placing this call:
recipe
In the browser the result is the following:
{"items":[{"receta":"5086941171011962392","media":4.5,"votos":12}],"hasMore":false,"limit":25,"offset":0,"count":1,"links":[{"rel":"self","href":"https://ge4e65cc87f573d-db20220526112405.adb.eu-amsterdam-1.oraclecloudapps.com/ords/admin/notas/?q=%7B%22receta%22:%7B%22%24eq%22:%225086941171011962392%22%7D%7D"},{"rel":"edit","href":"https://ge4e65cc87f573d-db20220526112405.adb.eu-amsterdam-1.oraclecloudapps.com/ords/admin/notas/?q=%7B%22receta%22:%7B%22%24eq%22:%225086941171011962392%22%7D%7D"},{"rel":"describedby","href":"https://ge4e65cc87f573d-db20220526112405.adb.eu-amsterdam-1.oraclecloudapps.com/ords/admin/metadata-catalog/notas/"},{"rel":"first","href":"https://ge4e65cc87f573d-db20220526112405.adb.eu-amsterdam-1.oraclecloudapps.com/ords/admin/notas/?q=%7B%22receta%22:%7B%22%24eq%22:%225086941171011962392%22%7D%7D"}]}
And I just need to take the median and votes values ​​to create the RatingCount and RatingValue labels
Can anyone offer me an idea that solves this little problem? :-)

IG - how to register changes to cell being edited - eg. to action shortcut key (Oracle Apex Interactive Grid)

We have common functionality across multiple pages: Cancel/Save/Back/Next (buttons).
I added shortcut keys via app-level static JavaScript file: Alt-C/S/B/N (using common CSS on the buttons & jQuery binds).
Problem: when using shortcut key whilst editing a cell, the edits to the cell were not saved with Alt-S, Alt-N. (For same reason, no confirmation requested on Cancel/Back, since the grid did not see any changes.)
Much searching and reading of documentation did not reveal the answer...
After a huge amount of effort: inspecting of widget/ interactiveGrid/ model/ getCurrentView via the console & inspect-panes (partly because I didn't find/inspect the .interactiveGrid('getViews','grid).getColumns() for a long time), I found a solution, but I feel there must be a more elegant one. Advice sought! TIA.
Here is my solution. Note the namespace is lps, and I have aliased apex.jQuery as lps.$ prior to the code below. I include comments for my Oracle colleagues less experienced with JS, Apex, jQuery, etc.
The solution works for all 4 shortcut keys, and should work for any IG (possibly even without a static id on the containing region, although my test case has a static id). There is some supporting code after the main solution. All happening on page load via the static JS file.
The jQuery selectors must only bind to a single button on each page!
lps.$(window).on('keydown',function($evt) // Capture Alt + shortcut key in keydown event
{
// $evt is the jQuery simplified event
if( $evt.altKey ) // the alt-key is being pressed-and-held
{
var key = $evt.key.toUpperCase();
if( lps.shortcuts[key] )
{
if( lps.$($evt.target).is('input,textarea') ) // effect the onchange() JavaScript (more specifically, the IG version thereof)
{
// We've pressed a shortcut key combo, whilst editing a cell, so the IG-onchange-y event hasn't yet fired
var tgtEle = $evt.target,
newVal = tgtEle.value, // the value of the on-screen element, regardless of change-status
tgtId = tgtEle.id, // this tallies with an elementId exposed via the igCols below
activeFld;
// IG stuff - igId - get the IG overall id via an IG ancestor div of the target field, then losing the trailing _ig suffix
var igId = lps.$(tgtEle).parents('div.a-IG')[0].id.replace(/_ig$/,'')
igWidget= apex.region(igId).widget(),
igGrid = igWidget.interactiveGrid('getViews','grid'),
igModel = igGrid.model,
igView = igWidget.interactiveGrid('getCurrentView'),
igRecId = igView.getActiveRecordId(),
igCols = igGrid.getColumns(); // this provides meta information about the columns in the IG
for( var i=-1; ++i<igCols.length; ) // find the field name of this IG-column from target element id
{
if( igCols[i].elementId === tgtId )
{
activeFld = igCols[i].property;
break;
}
}
// Phew. Eventually setValue on the IG-cell so Apex knows the cell has changed without an onchange firing
igModel.setValue(igModel.getRecord(igRecId),activeFld,newVal);
}
$evt.originalEvent.preventDefault(); // we're consuming the event, so stop it doing some native browser trick we don't want
lps.$(lps.shortcuts[key].selector).select(); // select the to-be-clicked-element
lps.$(lps.shortcuts[key].selector).click(); // synthesise a click on the selector'd element
}
}
});
Supporting code to pre-establish what our 4 shortcut keys are to be:
lps.shortcuts = { // keys and their jQuery selectors
B : { selector:'button.nav-back' },
C : { selector:'button.nav-cancel' },
N : { selector:'button.nav-next' },
S : { selector:'button.nav-save' },
};
Code to add hover-title to the buttons:
// Advertise the shortcut with a 'title' attribute (appears as popup tip when hover over the element)
for( var key in lps.shortcuts ){
lps.$(lps.shortcuts[key].selector).attr('title','Alt+'+key);
}

How to click on a specific TD element with puppeteer without id and name

I'm having trouble while trying to find a way to click the submenu option in this nav menu
The submenu option I want to click and the code of it
Is there a way of selecting it by it's content of it or by other alternative?
I tried await page.click(); but since i don't have any id, name or value to identify that option it automatically closes the chromium page
also tried clicking wit the content
const select = require('puppeteer-select'); const element = await select(page).getElement('div:contains(Negociação)'); await element.click(); didn't work either.
It is possible to filter certain elements by its text. Here is an example on how to select a table element and search in all its cells for a given text.
I started by writing 2 helper functions for getting text from an element and another to search text within an array of elements:
// returns text for an array of elements
async function findElementByText(elements, searchText) {
for(let el of elements) {
// get the text of the element and return
// element if text matches
const text = await getText(el)
console.log(`found text: "${text}", searchText: "${searchText}"`)
// alternatively you could use this for being a little more error tolerant
// depends on your use case and comes with some pitfalls.
// return text.toUpperCase().includes(searchText.toUpperCase())
// compare text and return element if matched
if(searchText === text) {
return el
}
}
// NO element found..
console.log('No element found by text', searchText)
return null
}
// returns text from a html element
async function getText(element) {
const textElement = await element.getProperty('textContent')
const text = await textElement.jsonValue()
// make sure to remove white spaces.
return text.trim()
}
With given helper functions you can now select the table and search within its td elements (the cells) .
// This selects the first found table. You may wanna grab the correct table by a classname.
const table = await page.$('table')
// select all cells in the table.
const cells = await table.$$('td')
// search in the cells for a given text. "cell" will be a JSHandle
// which can be clicked!
const searchText = 'text4'
const cell = await findElementByText(cells, searchText)
if(!cell) {
throw 'Cell with text ' + searchText + ' not found!!.'
}
console.log('clicking cell now.')
// click the element
await cell.click()
If you host the html yourselve it would make life easier by setting a classname OR id to the cells you wanna click. (only if allowed and possible ofc) .
In your next question you should provide the html as plaint text instead of an image. Plain text can easily be copied by other users to test and debug.
Feel free to leave a comment.

How to get cypress to return children length of 0 when there isnt any children

So I am writing a test that will add a card to a container(payment-card-container) and I want to confirm an element was added later by seeing if the children have increased by 1. But I am having issues when we try to count the children length when there isnt any. I am currently using the below:
cy.get('[data-test-id="payment-card-container"]')
.children()
.its('length')
.then(length => {
const childrenLength = length;
})
But Cypress seems to get an error because it cant find the children (Error below).
Timed out retrying: Expected to find element: ``, but never found it.
Is there a way this can work when there isnt any children and it returns the value of 0?
The problem with using a jQuery expression like
Cypress.$('[data-test-id="payment-card-container"]').children().length
is you don't get the Cypress retry for async updates.
If adding a payment card calls an API, the above expression will falsely report 0 children instead of waiting for the DOM to update.
There's really no good way to handle the no-cards situation,
Except
set up your test scenario such that there are no cards initially
add a card
confirm that there is now exactly one card
If you must test for zero children, a trailing .should() will remove the error message.
cy.get('[data-test-id="payment-card-container"]')
.children()
.should('have.length', 0); // no error when should expression passes
// Add card here
cy.get('[data-test-id="payment-card-container"]')
.children()
.should('have.length', 1); // waits for async add-card operation
Tested with
<body>
<div data-test-id="payment-card-container"></div>
<script>
setTimeout(() => {
const div = document.querySelector('[data-test-id="payment-card-container"]');
const p = document.createElement('p')
div.appendChild(p)
}, 2000)
</script>
</body>
One hacky way that I could think of is this. You can use the jQuery length and children() property to check the length:
cy.get('body').then(() = > {
if (Cypress.$('[data-test-id="payment-card-container"]').children().length == 0) {
//Do Something
}
else {
//Do Something
}
})

Intern functional test - iterating on set of items

This seems trivial, but I'm attempting to set up a functional test in Intern to check the inner text of a set of span elements in my page all with the same CSS class, but I can't seem to be able to isolate the text within the span. Here is my code:
'Span check': function () {
return this.remote
.findAllByClassName('mySpanClass')
.then(function (elems) {
assert.strictEqual(elems[0].innerHTML(),'Span Text');
})
}
I've run separate tests to verify that the spans are being found... the findAllByClassName function returns an array of two Objects.
Anyone done anything like this?
You need to use getVisibleText() instead:
Gets the visible text within the element. elements are converted
to line breaks in the returned text, and whitespace is normalised per
the usual XML/HTML whitespace normalisation rules.
return this.remote
.findByCssSelector('.mySpanClass')
.getVisibleText()
.then(function (text) {
assert.strictEqual(text, 'Span Text');
});
This would work for a single element.
If you want to check the text of each span, use:
return this.remote
.findAllByCssSelector('.mySpanClass')
.getVisibleText()
.then(function (texts) {
assert.strictEqual(texts, ['Span1 Text', 'Span2 Text']);
});