Generic code has been added to differntiate between the different Snackbar types in UI. Span has been added with data-test property created using key(mandatory) and variant(mandatory) with notification string e.g. ${key}-${variant}-notification i.e. xyz-error-notification. This span is wrapped around text and can be utilized for automation. So, it will be something like<span data-test= dataTest ? dataTest : ${key}-${variant}-notification>. Categories of Snackbar has been added.
Error Snackbar dataTest ? dataTest : ${key}-${variant}-error
Info Snackbar dataTest ? dataTest : ${key}-${variant}-notification
Success Snackbar dataTest ? dataTest : ${key}-${variant}-success
Warning Snackbar dataTest ? dataTest : ${key}-${variant}-warning
I have to create a function in cypres automation where If a error snackbar will appear in UI then I have to fail to test case,if success snackbar will appear then I have to continue with the test case,else I have to capture info and warning snackbar and also if anytype of snackbar will not be present from transition of one page to another then I have to log the message,no snackbar present.
Any kind of help is highly appreciated?
From comments:
So here is the flow:
Please help me with the exact code for this
Try something like this, testing for span with jQuery
cy.get('body').then($body => {
const $span = $body.find(`span[data-test^="${key}-${variant}-"]`)
if ($span.length === 0) {
cy.log('Nothing found')
return
}
if ($span.attr('data-test').split('-')[3] === 'error') {
throw 'error'
}
if ($span.attr('data-test').split('-')[3] === 'success') {
return
}
cy.log($span.attr('data-test'))
})
If you want to capture the transitory element that may or may not appear, use a recursive function
function eatSnack(level = 0) {
// Figure out how many times you want to check before giving up
if (level === 10) {
cy.log('Nothing found')
return
}
cy.get('body').then($body => {
const $span = $body.find(`span[data-test^="${key}-${variant}-"]`)
if ($span.attr('data-test').split('-')[3] === 'error') {
throw 'error'
}
if ($span.attr('data-test').split('-')[3] === 'success') {
return
}
if ($span.attr('data-test').split('-')[3] === 'warning') {
cy.log($span.attr('data-test'))
return
}
if ($span.attr('data-test').split('-')[3] === 'info') {
cy.log($span.attr('data-test'))
return
}
cy.wait(10) // adjust this to suit SnackBar
eatSnack(++level) // try again
}
})
eatSnack() // start looking
I wouldn't mind seeing more context, but from what you've given
const key = 'abc'
const variant = '123'
cy.get(`span[data-test^="${key}-${variant}-"]`) // queries starting portion of attr
.then($span => {
const level = $span.attr('data-test').split('-')[3] // what type is it?
if (level === 'error') throw "Woops an error" // fail the test
if (level === 'success') return // do nothing
// otherwise log something
cy.log($span.attr('data-test'))
Since snackbars are generally transitory, you would have to carefully place the code after the trigger action.