i have to develop a multipage application that includes invocation of several web services.
My first page has a login page. based on the user input i have to traverse to next page while calling the next web service simultaneously. so obviously this all depends on the login page information that has the userid and password and the response from the web service such as personId etc.
i need to store this information temporarily for a particular session but... how to do this?
There are two kinds of page:
There are the UI states as seen by the user. Your Login page and your Next page are examples of these. From the user's perspective they see a succession of pages.
However you are writing an App, a single controlling thing that is in charge of all those "UI pages". I suppose that you are using MobileFirst to create a hybrid application that is effectively executing in a browser. From that browser's perspective you have a single HTML page. This is important, MobileFirst only works with single-page applications.
Now the browser loads the HTML and JavaScript for your single application page and that JavaScript stays resident as the user moves between the different "UI Pages", so the JavaScript can have variables for keeping the state you are asking about. The actual UI navigation from "page" to "page" is usually done by hiding and revealing DIVs.
Hence your WebService call results will be delivered (asynchronously) to some JavaScript function you define, and in the meantime your code can hide the login page and reveal the next page as required. The login data being held in JavaScript variabes.
All of this is simplified by using a framework such as AngularJS which abstracts the messy details of hiding and revealing and dealing with asynch delivery.
Related
Just finished learning Vuejs and after visiting a few websites that use Vuejs like;
a) https://coderstape.com
b) https://www.thenetninja.co.uk
c) https://laracasts.com
I noticed that by navigating around the websites we by clicking on navbar links and some other links then the pages refresh and I haven't been able to find out the reason online. Could someone kindly explain what's happening in that? Doesn't it go against the purpose of SPA?
For example the last site you specified: https://laracasts.com.
On its main page there is a white button "BROWSE COURSES". If you open Chrome DevTools panel(look at the picture with explanations), go to tab "Networks" (1) and then click on this white button, you can see GET request to "series?curated" (2). If you open its details, you can see that as response, new page is received in the form of an HTML code (3), not JSON for example, as is usually the case in SPA.
Also, if you look at what programming language is used on this site, for example, using service https://whatcms.org/?s=laracasts.com, you can see that this is a PHP, namely Laravel.
From all this, I can make the assumption that they use Vue.js only partially, maybe in several components, but the site navigation itself is presented in the form of traditional static pages, which is why the page reloads.
Also, for example, if you take a look at this website https://www.spendesk.com/, you can see that they use Vue.js+Nuxt.js, as well as Node.js, as indicated by service whatcms.org, and if you try to navigate to various pages on this site, you will see no page loading. I can say that this site is a true SPA in the form in which you mean it.
I heard that you can do a SPA with a Laravel backend, but I think that's another story.
I've developed an Ext JS 4.0.7 app for my company. It has various modules for different team's needs. Now, the company want to make sure only relevant people have access to relevant modules in an app. It's an ERP application which has CRM, MRP, Engineering, HR and Finance modules. Now, respective team members should have access to respective menus and pages and super admin will have access to everything.
I know how to control the menus based on user login. But not sure how to integrate user login screen into my app. I know basics of Ext JS and able to design a Login screen using form panel ...... but not sure how to make it as my app's first screen and upon successful login, let the user in and able to logout from there.
If anyone already developed such functionality, i request to share the solution here. Any pointers or code snippets will be a great help.
Thanks very much in advance.
My application has a header (company logo and app title - horizontal on north) and left menu and content panel.
So, here is how login/logout screen implemented.
When app is loaded, when viewport is loaded, on render, I load menu store and load 'Login' and 'Change Password' menu items in them.
When user enters login/pwd, via ajax call , will call servlet and process login data. Upon login successful, based on user role, respective menu json built in server side and menu store is loaded with this json. This json has 'Logout' menu by default. So, when user logs out, will load Login screen in content panel.
Not sure whether any other best ways to implement the same. But this is working well.
So i'm trying to set up zabbix web scenario to monitor webpage up/down. Ive found a way googeling which should work for me, however there is an issue in the login page. I need to be able to press TAB 4 times and then end it with a space to reach the login information panel. But i can not figure out how to tell zabbix to insert TABs or Spaces on the page before it attempts to login.
by default SMART-ID is our main authentication, and the order can not be changed as it would interfere with our user welfare policies. So i need to make zabbix able to navigate to the "Parool" tab for login. Also using the tab key on the page visualy does nothing untill you press the space bar, only after space bar it actually shows you where you have navigated.
So far i have tried to simply add tab and space in the "post fields" section however this does not do anything and i have not managed to google the information i require.
That's not how Zabbix Scenarios works.
Zabbix uses libCurl to check web endpoints, not a browser: you can't render javascript nor post/click to forms (ie: like Python Splinter does).
You can post data to specific web endpoints, like http://somewhere/test.php?id=2345&userid={BLABLABLA} then grab the output and/or the resulting http return code.
Please refer to the documentation for a complete overview.
Let me further explain.
You have a page where an application lives. However, upon first login, the user is prompted with a welcome screen that loads in the center of the browser. Like a pop-up from the application. This welcome screen is to help the user get familiar with the app. You can move on through the screens by reading the information and clicking the Continue button. After several of these pop-ups, the application will now be available for testing.
So how would I handle this in the Page Object Pattern using Selenium. Should I have a main page that just has functionality to navigate through these modals? Or should the main page return objects that represent each of the individual modals? Or should each modal be a separate page that I interact with?
Basically, I can think of several options:
ApplicationPage.Modal1.Continue();
or
Modal1.Continue();
Modal2.Continue();
or
ApplicationPage.ContinueThroughModal1();
or
ModalPage.Continue1();
ModalPage.Continue2();
I prefer to look at pages as collection of services. So
should the main page return objects that represent each of the individual modals?
PageObject helps you to improve the maintenance and reduces code duplication. So you can use it as an interface to a page of your AUT.
should each modal be a separate page that I interact with?
I would say - yes. If some future change occurs (in any modal), your PageObj will handle it without changing the test itself. Why not introduce a IModalPopup with Continue() method which will handle the skipping that your tests need. Further more in your MainPage class you can keep a ICollection<IModalPopup> welcomeScreens and iterate those.
Aiming at a full answer here - there is no need to actually go through this
welcome screen that loads in the center of the browser.
Once is enough. Every other test can utilize URL navigation over crawling each middle page. Single test that covers your end-user journey (by clicking required buttons/links) should be sufficient.
I'm creating a SPA app using Durandal and I would like to include a credit card payment facility. The guys that I'm looking at requires you to give return URLs to success, cancel and a view other pages, is that possible?
To me it would be breaking the 'single page' part of SPA, but is it possible? Could I do it all in a window?
Disclaimer: I don't know Durandal, but you would solve this in an SPA using either "hashbang URIs" or actually re-serving the SPA in your webserver for the requested return URI and adjusting the content using the same technique as hangbash URIs but using history.pushstate/history.popstate instead, see here: https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Manipulating_the_browser_history
A more general article from Google is available here that covers the same principle: https://developers.google.com/webmasters/ajax-crawling/
This "works" because SPAs are SPAs only in that the browser requests a new HTML document from the server once (or in your case, twice), the SPA should still be updating the history and address-bar state of the UA as the user navigates the application, just as though it were a regular multi-page application.
A great example of this is GitHub's source navigator: Try here ( https://github.com/angular/angular.js ) and navigate the repository, observe that the contents of the file-listing change as does the address bar, but your browser doesn't reload the whole page... yet if you copy+paste the (modified) address bar address into a new browser window, you get the same page back.
I looked into doing credit card processing from a SPA and the best option I had found was Stripe. They supply a javascript file that looks like it would work, I never implemented it on my project due to time constraints so I can't confirm that it works but it looked very promising.
IFRAMEs are quite good for this sort of thing. You can use jQuery to hook an event handler to the page load event and this will tell you when the other end has responded. Load the 3rd party page into the IFRAME and serve response pages on the URLs you provide to the service provider. As mentioned by others you can use routes to identify the response pages. The IFRAME will stop the round-tripping from mucking up your application state and in fact it is possible to put script in your response pages that dot-notates its merry way up the DOM and into your app.