How to use Protractor with Eclipse IDE

Beginners find it difficult to decide on which IDE/Code editor to use for protractor test automation framework. Every online tutorial proposes something different which makes the situation worse.

The main requirement of an automation tester when looking for a code editor are :

a. autocomplete and template suggestions for protractor and javascript

b. ease of use

Some suggestions are VS code, Atom, Webstorm etc. but the best IDE for our purpose is Eclipse. I know some would say that It is only true in case of java not javascript. I am going to list some steps which will kick-start your protractor scripting with the same Eclipse IDE, which you have used with selenium.

                        <figure>
                                    <img width="823" height="299" src="https://automationscript.com/wp-content/uploads/2020/08/wwd.png" alt="" loading="lazy" srcset="https://i0.wp.com/automationscript.com/wp-content/uploads/2020/08/wwd.png?w=823&amp;ssl=1 823w, https://i0.wp.com/automationscript.com/wp-content/uploads/2020/08/wwd.png?resize=300%2C109&amp;ssl=1 300w, https://i0.wp.com/automationscript.com/wp-content/uploads/2020/08/wwd.png?resize=768%2C279&amp;ssl=1 768w" sizes="(max-width: 823px) 100vw, 823px" />                                          <figcaption>Wild Web Developer</figcaption>
                                    </figure>
    [hfe_template id='1966']<ol style="font-size: 16px; font-style: normal; font-weight: 400;"><li style="font-size: 16px;" data-selectable-paragraph="">Please download and setup your latest Eclipse for java.</li><li style="font-size: 16px;" data-selectable-paragraph="">Download Wild web developer plugin from Eclipse marketplace.</li><li style="font-size: 16px;" data-selectable-paragraph="">Convert your project into tern project. <em style="font-size: 16px;">Right click&gt; Configure&gt; Convert to Tern Project</em></li><li style="font-size: 16px;" data-selectable-paragraph=""><em style="font-size: 16px;">Select following modules from Tern. <em style="font-size: 16px; font-weight: 400;">Right click&gt; Properties&gt; Tern&gt; Module&gt; </em>AngularJS, Browser, Browser extension, Completion Guess, Completion String, Jasmine, Node.js, Node Extension, Protractor<br /></em></li></ol>     
                                    <img width="562" height="228" src="https://automationscript.com/wp-content/uploads/2020/08/tern-convert.png" alt="" loading="lazy" srcset="https://i1.wp.com/automationscript.com/wp-content/uploads/2020/08/tern-convert.png?w=562&amp;ssl=1 562w, https://i1.wp.com/automationscript.com/wp-content/uploads/2020/08/tern-convert.png?resize=300%2C122&amp;ssl=1 300w" sizes="(max-width: 562px) 100vw, 562px" />                                          
    Now you are loaded with all the capabilities needed to work with protractor test automation. You will get autocomplete suggestions like below and the source of it.</p>     
                                    <img width="700" height="260" src="https://automationscript.com/wp-content/uploads/2020/08/jasmine.png" alt="" loading="lazy" srcset="https://i1.wp.com/automationscript.com/wp-content/uploads/2020/08/jasmine.png?w=700&amp;ssl=1 700w, https://i1.wp.com/automationscript.com/wp-content/uploads/2020/08/jasmine.png?resize=300%2C111&amp;ssl=1 300w" sizes="(max-width: 700px) 100vw, 700px" />                                         
    <p style="font-size: 16px; font-style: normal; font-weight: 400;">Autocomplete for protractor is very limited with VS code. Having worked on numerous Selenium projects with fantastic autocomplete supported by Eclipse for Java, It doesn't feel satisfactory. </p><p style="font-size: 16px; font-style: normal; font-weight: 400;">Now with this workaround, you get right method required at right time when typing the same old .(dot).