checking messagebox in siesta

Get help with testing, discuss unit testing strategies etc.


Post Reply
User avatar
Hakim
Posts: 58
Joined: Fri Apr 26, 2019 3:00 pm

checking messagebox in siesta

Post by Hakim »

Hi all,
I have started the testing journey recently. Mainly, I am focusing on UI tests for now.
I have implemented a method to test crud actions for a webapp(implemented in extjs) with more than 600 screens. Things look smooth till now. However, I am facing some tiny issues and I would need your guidance.

Sometimes, when it happens to delete a record, there is always a messagebox alert.

I use recorder to get dom elements which are in two forms:
1.

Code: Select all

{waitForCQ: "#myAppName-messgbox title[text=Do you want to delete this record\?]"},
{click: "messagebox[title=Do you want to delete this record\?]#myAppName-messgbox #yes => .x-btn-inner-default-small"},
2.

Code: Select all

{waitForCQ: '#myAppName-messgbox title[text=Do you want to delete this record\?]'},
{click: '#myAppName-messgbox #yes => .x-btn-button'}
The solution I am applying now is to use a condition based on screen name in order to perform a chain action.
example:

Code: Select all

delAction.it("is clicking trash icon", function(del){
	if(screenName === 'employee'){ // there are more screens to be added to this condition
	del.chain(
	waitForCQ: '#myAppName-messgbox title[text=Do you want to delete this record\?]'},
        {click: "messagebox[title=Do you want to delete this record\?]#myAppName-messgbox #yes => .x-btn-inner-default-small"'}
	)
}else{
	del.chain({waitForCQ: '#myAppName-messgbox title[text=Do you want to delete this record\?]'},
        {click: '#myAppName-messgbox #yes => .x-btn-button'})
}
})

My question is: is there any way to check the visibility of messagebox so that if it exists, the pointer could click Yes/OK and continue
Here is the image of the messagebox:
Image
Thanks

User avatar
nickolay
Core Developer
Core Developer
Posts: 3466
Joined: Mon May 16, 2011 10:48 am

Re: checking messagebox in siesta

Post by nickolay »

Hi,

Yes, you can use all of the Siesta and generic DOM API in your tests. And you can create your own helper methods / assertions to automate repeating actions (see this guide: https://www.bryntum.com/docs/siesta/#!/guide/extending_test_class)

To check if message box exists you can use this method: https://www.bryntum.com/docs/siesta/#!/api/Siesta.Test.ExtJSCore-method-query

However it only checks the presence of the element in the DOM, not if it is actually visible. So you might need to pair it with the https://www.bryntum.com/docs/siesta/#!/api/Siesta.Test.Element-method-isElementVisible
We offer training in both Ext JS and our products, read more here.
Read the API documentation

User avatar
Hakim
Posts: 58
Joined: Fri Apr 26, 2019 3:00 pm

Re: checking messagebox in siesta

Post by Hakim »

Thanks Mr Nickolay. That saves my time a lot.

Other questions will come when I start with unit tests :)

User avatar
nickolay
Core Developer
Core Developer
Posts: 3466
Joined: Mon May 16, 2011 10:48 am

Re: checking messagebox in siesta

Post by nickolay »

Sure, yw
We offer training in both Ext JS and our products, read more here.
Read the API documentation

User avatar
Hakim
Posts: 58
Joined: Fri Apr 26, 2019 3:00 pm

Re: checking messagebox in siesta

Post by Hakim »

Hi Sir Nickolay,
I have one more question here for clarification:

Code: Select all

if(t.query("messagebox[title=Error Code \:500]#myApp-messgbox toolbar => .x-box-inner")){
                                                if(t.isElementVisible("messagebox[title=Error Code \:500]#myApp-messgbox toolbar => .x-box-inner"))
                                                    t.chain({ click : ">>messagebox[title=Error Code \:500]#myApp-messgbox #ok"});
                                            }
Here, the problem I am having is on
t.isElementVisible()
, when the message box is not visible (let's say no popup alert), that isElementVisible() throws an error:

Code: Select all

siesta-all.js:30596 Uncaught Error: Syntax error, unrecognized expression: messagebox[title=Error Code :500]#myApp-messgbox toolbar  => .x-box-inner
.
Am I using isElementVisible() in a wrong way?
Thanks!

User avatar
Hakim
Posts: 58
Joined: Fri Apr 26, 2019 3:00 pm

Re: checking messagebox in siesta

Post by Hakim »

And when the alert is visible, it works fine...

User avatar
nickolay
Core Developer
Core Developer
Posts: 3466
Joined: Mon May 16, 2011 10:48 am

Re: checking messagebox in siesta

Post by nickolay »

Ok, looking at the code you provided:
1) Using `t.query` in this way is not correct:

Code: Select all

if(t.query("messagebox[title=Error Code \:500]#myApp-messgbox toolbar => .x-box-inner")){
`t.query()` return an array of matching elements, if there's no matching elements it returns empty array, which is a "truthy" value. So this condition will be always true. You probably mean:

Code: Select all

if(t.query("").length > 0){
which says - if the length of the array returned is greater than 0.
2) Having a lonely `t.chain({ click : ">>messagebox[title=Error Code \:500]#myApp-messgbox #ok"});` in the `if` is probably incorrect. Click action is asynchronous (as pretty much every user action simulation), you probably need to provide some callback, as a last action of this chain:
`t.chain(
{ click : ">>messagebox[title=Error Code \:500]#myApp-messgbox #ok"},
callback
);`

There's plenty of materials on the internet about the asynchronicity in JavaScript, need to become familiar with this concept.
3) About the exception - hard to say please post a full test code.
We offer training in both Ext JS and our products, read more here.
Read the API documentation

User avatar
Hakim
Posts: 58
Joined: Fri Apr 26, 2019 3:00 pm

Re: checking messagebox in siesta

Post by Hakim »

Ok. Thanks. I will check on that again

Post Reply