good yes hi everyone um we're back again with another another episode of um the ATF workr series for Washington DC and today we'll be talking about um working with manual page inspector and as usual I have my co-host here Amanda hello everyone nice to see you again all right good so um this is our forward looking statement um and um this is the agenda what we'll be covering today today we'll be talking about introduction to page in page inspector who also talk about some key features within page inspector would um mention the testable page components and also the UN testable page components then we'll get to the section where Amanda will do a demo of how to get around P spor yes so today um if you're familiar with ATF you would know that there are some components Within ATF that you can't um typically test and with the manual page with the page inspector this gives you the the loger to be able to um comprehensively analyze and test each of the user interface and um some key features you should be aware about is the first one being um within the page inspector itself the interface itself you would find something called the highlighted frame for current page so what this means is that it shows um the boundary of what is currently being inspected within page inspector then we also have another um key feature called the inspector pain control um within this um pain control you can use this to um interact with the page itself um we also have components another component called the component identification button so this is the tool that enables users to identify which specific components can be tested or is available for analysis then um you also have a section of this of manual page inspector called the list of testable page components and this gives a comprehensive list of the page components available for custom U testing then um the fourth key feature you should be aware about is the paid components set filter and also the the detailed component um information so now we'll move over to the next thing to discuss which is the testable page component component two testable page components within the page inspector the first one being the standard HTML components and the second one being the JavaScript component as part of um our testing these components can be used um for custom U testing then we've got the on testable page components if you are um used to um ATF you would know that there some component that can be tested so um for this we have two categories also the first one being the exclusion listed page component and um examples of this are list from service catalog and workspaces um these are not part of the custom testing because we have test Ts that can be used to test um all of these components um the second one being the inaccessible page components now we're talking about um third party JavaScript libraries or elements that has um some bit of Shadow D so um now that I've gone through the the types of component that can be tested and not within my page inspector I would hand over to Amanda to take us through a demo yes um so I will share my screen and I do already have the manual page inspector open on the screen here but in order for you to find it there's two methods that you can do and the first thing if you type manual page inspector or ATF in my case in the filter Navigator you will see this module here clicking this will take you direct to this page another way to do it for example let's say you're on a page or any type of page that you intend on testing let's say you want to directly open page inspector from there you can click preferences um debugging and then if you turn on this um property here this will open up page inspector in your instance on the current page you're on okay but for that I don't want it on this page since we have it manually open in here I do want to select the different type of options that they have as far as what pages you can um test in your instance so we have UI Pages here and this one is directly connected to the UI Pages table so anything that appears in that table is what you would see here as far as options um one thing to keep in mind with these UI Pages um as far as when you test it in ATF if it's something you would be able to find these UI Pages either by navigating to it maybe having a selection of steps that navigate you to this page or you can find them from the filter Navigator some of these options here some of these modules will directly take you to a UI page um we also have standard UI um one thing about the standard UI a lots of the options that you see are list in forms and this does have its own category so this is kind of one of those components that are not necessarily testable um but if you do happen to have any components added to the to the form it could be useful or for example let me just click on a random record one second here and expect um even though some of these are not testable because they have their own category this will be pretty helpful in helping you figure out what types of things to test um so for example let's say you don't really know you're not familiar with the categories and you're not sure what to use this will give you a reminder that don't use the custom UI step for this use the form category step instead okay and then the last option that we have let me go back to standard UI or the next option we have service portal um this one's pretty self-explanatory you're able to select any portal that appears um in that portal module and then you're also able to select a specific page as well one thing about these portals if you are not sure what the page is a nice trick that you can do is actually take a look at the ID in the URL and same for any of the pages thei Pages lots of the times the name is actually in the URL and this will help you um identify which ones to select in the manual page inspector and in ATF as well and then the last option we have here is Custom Custom works for any of these scenarios um it allows you to paste the URL um directly into here um so let's say for example you're not sure you can't find something in UI Pages or the standard UI or in service portal you can directly paste the entire URL in there um so for example let's see let me just navigate away from this for example so let's say I want to test this success dashboard here and that opens up to this page that we see you are able to copy the URL I'm I'm just going to copy everything up to Home paste that in there and then it will open up for you to inspect let me take that off here um so those are the different types of ways and then like I mentioned the custom that will work for any type whether that be a service portal page or UI page um directly typing in that URL will get you there um so once you actually get into pyden inspector I'm going to take this off here as well um you have a couple different options that you see which is this target here this allows you to drag it onto any of the components for you to see if it's testable or not um and then we have the page components this will just be a long list of the components that it's recognizing so anything that appears here means something is testable within ATF let me drag on to some of these components um like we mentioned there are some limitations to ATF so for example UI build yes they're making more um updates to that in the in the future soon we'll be able to test more components um but right now if you are trying to test things in UI Builder or workspaces either use the category for that or it can recognize at least some of the text fields and the button Fields um so those are some workarounds for how you may be able to achieve some of your goals um even if a component is not testable currently um so I will click on one of these buttons for example um and you'll see that not only are you able to see information about what the button how it appears in page inspector you can see that information but you can also test some actions as well and these actions are the actions that are available with an ATF when you're creating your test um so you'll see in ATF for the custom UI you're able to click on any of the buttons you're able to um test for checking the value of the buttons and you're also able to check um visibility so if it's disabled for example then that means obviously the buttons appearing in the page if it isn't um and so on so let's say I want to click on this component you're actually testing the ATF test step before you put it in your test um so you're able to see exactly what would happen if you were to um replicate this with an ATF so I'm going to switch over to my ATF test so that we can see how you can use page inspector um and incorporate that into ATF tests so right now so far the only thing I did was impersonate a user and then navigate to a module and I've navigated to that same exact success dashboard that we see here so for this test what I'm going to be doing is just confirming that we're able to not only see the dashboard but also click on these time frames so see quarterly monthly and yearly um so the next step um and then keep in mind for this one what I used to navigate to the success dashboard was this navigate to module step if you wanted to do something like a portal UI component if that's what you wanted to test you would use let me see you would use this custom UI category and then you can see there's an open to portal page um property here and then like I mentioned there's some things that will help you on how to navigate to the correct page you can see that information in the URL um so I can click in this example employee Center again the page is in the URL so we have ticket and then these parameters here this will help you get directly to this page and the parameters are also in the URL so you see this and sign here that means the next parameter is table so that would allow you to go into here put table and then you'll see in the URL table equals and then there's the value so you can post incident you can also add multiple parameters as well because in this case there are two parameters in this um so the next one would be CIS ID this ID and then you have the number placed here so this would help you directly navigate to a specific page um if you don't have those parameters set properly you might end up navigating to the wrong page right for example if I were to just click ticket um that would probably navigate me to a blank page and then that could lead to test failures for example um so you want to make sure you have that entire path written into the test um but back to the actual example we're doing um a page in the classic UI and not on a portal so we'll be using the navigate to the module test and then the next step once we do that it will take us just to that homepage that we see here um so Next Step would be clicking on those UI actions um so you again you want to go to custom UI and then like I mentioned earlier we have those three actions um so setting the component values validating the components are visible on the page and then clicking on those components we do have some other ones as well as far as asserting text on the page this is because some of the UI components they might not be clickable so the only workaround that you're able to do is see if it's visible any text is visible on the page and this will help you to validate your functionality if you're not able to click on a specific button okay so I will click the custom UI and what will actually happen when you click that component is it will run your test and then pause on the on each UI based St it will pause so that it can capture all of those page components um so you can retrieve components here and then we'll watch it execute and then it will stop let's see yep taking a Snapchat of the current image and that's it grabbing those components um if you need to redo it for example you can r- retrieve the components again but we'll just continue on to uh the next field and then you will see all of the options that we pretty much saw let me see I don't have it open on here but everything that we saw on page inspector you will see all of those options appear here as well and the button that we are looking for will be this all Service Groups button not all Service Group sorry the yearly button uh so you can type you can do a quick search for here let me see here was I able to component that one let's see where it is yep we're on monthly okay so it's on monthly by default not yearly so we can do that so um then when you click submit um what I do for every time I'm building a test I always run it to make sure that I um had the intended functionality executed um so I will run that test here and then once the page Cals down it should click on that custom UI um component that I had and then open that up um so the next step the first part of this test was simp simply opening up this list um and the next step will be clicking on another option for us to see the homepage change and because of that um as you can see when I clicked on that button more UI components um are now visible so now we need to add another click on a custom UI component and we'll need to retrieve the components again because now there are additional options um and we if we don't retrieve this redo that um we won't see those new updates um so it'll run through that here it's going to capture all of the components on this first page then it will click the button so that it can capture these new components that are now displayed okay so then we'll click next and now the yearly option will be available so when I first typed it in it wasn't available and now it's here um since we recaptured that you can click submit here and then execute the test again just to make sure that everything um is now refreshing properly right one second executing the server side steps let's see if I have two open yep I had to open okay so it will click C that button and then now it's going to click the second UI component as well and then refreshing this page so the last step is the actual validation part we have to test or we have to add a validation um Step so that we can confirm that the changes were actually made um so in here how I'm going to validate this whenever you do click any of these components you'll see that the title changes um so I'm actually going to do a text validation for this year and make sure it says overview of 2024 um so let me close out both of these client test Runners all right add a test up and then you can see the assert text on page for the custom UI we're going to assert for the overview of 2024 and then make sure the assert type is selected to what you intend so we want to verify the text is on the page you also have the option to verify if text is not on the page okay so then I will run that test one last time but that is pretty much the steps in this more um simple example the steps on how you can use the manual page inspector and incorporate that into your ATF tests okay so clicking through those buttons and then the last step will be validating that this is present on the screen okay nice and then we do have a series about how to review your results and and Etc but you're able to review that as well by clicking this button all right so that was all for the demo