Automating React JS application with Protractor(Jasmine frame work) - javascript

I have been using Protractor(Jasmine frame work) to automate Angular JS application. So i wanted to automate React JS application.
I have used Protractor(Jasmine frame work) to automate React JS application, but i faced lot of issues, had to use lot of explicit waits to visible the react web elements. Do we have any option to make it to wait until all the react web elements are visible
or
Please suggest the best way to automate React JS application

Not possible in protractor at least
But I always use explicit waits even for angular applications because built-in protractor's waiting often is not stable
If you understand the correlation between API requests and loading of the application you'll have no problems. So basically reactjs is a library to build one page application which is loaded when you open the url. Once loaded and rendered in browser there is no more loading, unless an API request is sent. When that happens normally developers put up a loading animation. With that said, 95% of cases, you need to handle waiting in 2 cases: when the app is opening and when loading animaniton is up. If you create methods for that and put them in page objects library, your problem is solved with a few extra lins of code here and there

Related

Is it possible to create a react app that runs when Javascript is disabled in browser?

I am developing a reactjs site and I want to make that site running even when the javascript is disabled in browsers. Is it possible? how to develop a react site that runs on both conditions (Enabled and disabled of Javascript) for ex: fb, StackOverflow are running even javascript is disabled how it happens?
React is a JavaScript framework for the front-end. Which means it executes in the browser. If you disable JavaScript in the browser, React doesn't work anymore. Just in the same way if you delete Photoshop from your computer, you can't open .psd files anymore.
If you really must support browsers without JavaScript (which most people don't), you need to build your app to work with plain old HTML based navigation (think links, forms etc).
It's possible to use React (for people with JS enabled) and a fallback for those without, this approach is called Progressive Enhancement. Might be useful to you: https://softwareengineering.stackexchange.com/questions/25969/should-i-bother-to-develop-for-javascript-disabled
First thing, React is a javascript library so it depends on Javascript. But you can use server side rendering like Next.js and render the content on server side.
But still user cannot use any react feature in browser.
It's good to render the initial content on screen.
Stackoverflow renders the initial content on server and sends the initial rendered content to the browser.
It's also good for SEO.

server side rendering and single page applications

When we use client side rendering, I know this will reduce the amount of connection time with the server, for example if we use react for that (using create-react-app) , react will create one js file contains all of our application stuff except the data we will receive from the api (which will most often be in json) - but that means all the DOM stuff will be in that one js file that the user will get when he load the page for the first time, now for small apps I don't see a problem. But in large applications, when we have a lot of pages, components and sub-pages using routing libraries like react-router, do all these things and code will be in that file? wouldn't that make it too big? to be send at once?
There is no doubt that these techniques increase the performance of the website and interactivity, but my concern is the first time the site is loaded and how to make it as fast as possible with Relatively large applications
Thank you all, the solution is to use "lazy loading" and "code splitting" techniques, This is a good article about this :
Lazy loading routes in react

Page created with ReactJs is not indexed by google

I have a news section created with ReactJs, each news post acts as an individual page.
Unfortunately Google is not indexing these pages because of REactJs. I tried to use the babel-polyfill webpack, but it's still not working. Also, I'm making my Ajax call BEFORE rendering the DOM.
Any other ideas for another workaround on this?
the google crawler won't wait for async requests to resolve, and because your pages are rendered on the users' client, they will appear to be empty pages.
You have two options. Either modify your app to render on the server, this is often called a universal app, or an isomorphic app. There are many tutorials for creating these. The other option is to pre-render static html from your code so that the crawler can see what should be there. There are numerous libraries you can use for this.
The first option is more extensible and probably preferable, but a bit more complex. So make the choice about whats more appropriate for you
It is not indexing them because they are bundled so tat they could be rendered inside your client's browser. What you ought to do is server side rendering.
You can find more about it here: https://medium.freecodecamp.org/server-side-rendering-your-react-app-in-three-simple-steps-7a82b95db82e

Slow Angularjs page initialization - long delay before html loading

I'm running an angularjs app, and can't figure out why my page is loading slowly. The css and js files all load quickly, but there is a long delay between that and when the html loads, where the app just seems to stay suspended doing nothing
headertemplate.jtml, footertemplate.html, and notelist.html are the partials being loaded to make up the view
Angular uses ajax to retrieve templates. You should be able to look at the network tab in developer tools to see the ajax request for each template. That might give you a clue as to what the hold up is.
I'm not sure why it's taking so long to receive them, but one way you can speed that up would be to pre-cache the templates with a tool like HTML2JS. This way, your templates are just another JS file that you include along with your program code and templates are loaded as soon as your program code is loaded. It will increase your initial download size, but will greatly improve the speed of fetching templates.
You can cache all templates in $templateCache which will make angular app never make xhr request for partial htmls.
https://docs.angularjs.org/api/ng/service/$templateCache
There are various gulp and grunt modules to automate that process.
https://www.npmjs.com/package/gulp-angular-templatecache
https://github.com/ericclemmons/grunt-angular-templates
By the way are you making any server calls in angular.forEach, for some reason they don't show up in network tab (idk why?? o.O)
Or may be you are using resolve in ui-router's state config which is taking time to activate the state and calling html partial..

Polymer Project is slow to load

The site has a nice theme. However the site slow to load even on googles serves. Is there anyway to speed polymer initial load time. Also it has loads of http request, can you reduce this?
It sounds like you're looking for the Polymer Starter Kit. It includes a build process to minimize resource loading, including Vulcanize.

Categories