Website Automation Testing for Beginners with Protractor

Gain a high-level tour of browser developer tools, the HTML DOM structure, and how tags, elements, and attributes work, plus absolute and relative paths for automation with Protractor.

Master browser developer tools in Chrome for Windows, using inspect to view page elements, and explore console and sources to support website automation testing with Protractor.

Explore the document object model (dom) and html structure, including body, div, h2, and paragraph tags, and learn how browsers render and interpret nested elements to render pages properly.

Understand HTML tags and elements to build a foundation for website automation testing, focusing on opening and closing tags and why br and hr do not require closing tags.

Explore absolute and relative paths for locating files in web automation testing with Protractor. See how dot slash navigation and image folders support portability across machines and web publishing.

Explore the basics of CSS syntax and how to use it, then examine Bootstrap as a framework for building a sample web page later in the course.

Explore cascading style sheets and how to apply a single stylesheet across a website to control borders, background color, and text color using id, class, and tag selectors.

Bootstrap lets you quickly build responsive web pages with minimal effort. Check docs for components like alerts, buttons, carousels, and dropdowns, and copy code into your page with live demos.

Explore the JavaScript portion of website automation testing, learn its core components and mechanics, and apply JavaScript while building a sample site and while writing Protractor code.

Learn core JavaScript data types and variable handling for web testing: declare variables, use strings, numbers, booleans, and undefined, understand quotes, assignment vs. comparison, and string concatenation.

Learn how if statements control logic by checking age 21 or over to buy alcohol, using console log outputs for true and else for alternative results, including else if.

Master while loops by setting a counter, evaluating while conditions, and incrementing with i++, avoiding infinite loops; the lecture shows printing 0 through 9 to the console.

Learn how to implement for loops in JavaScript for website automation testing with Protractor, covering initialization, the i < 10 condition, and increment, and observe console.log output for 0–9.

Explore how functions bundle tasks into reusable blocks to perform calculations. Identify parameters and arguments, call functions with parentheses, and see how return values and console logs drive output.

Kick off your website automation project using Protractor by building a login page and a superhero roster with voting and notifications, giving you a local practice site to automate against.

Set up a protractor project by creating a superhero demo structure with folders images, style, js, and index.html, configure bootstrap template, and open the file in Chrome via VS Code.

Learn to implement and format the Bootstrap navigation bar, with home links, a hero facts dropdown (Wolverine and Spider-Man), a log out control, and a search, using Visual Studio Code.

Discover how to structure text and images using a Bootstrap layout, with container-fluid, centered columns, image alt text, and a superhero roster example for website automation testing with Protractor.

Build a superhero roster on your site by creating a Bootstrap-styled list with a UL container and LI items, using list groups to display five heroes, including Wolverine and Spider-Man.

Explore building user interfaces with bootstrap forms, including a hero input form and a movie vote form, featuring text fields, labels, placeholders, radio options, and a submit button.

Build and refine a two-column Bootstrap table displaying movie titles and votes, using proper th and td structure, with five rows and editable data.

Learn to implement bootstrap modals with an overlay, building two fact modals for Wolverine and Spider-Man, updating navigation, and customizing modal text.

Learn to manipulate the browser DOM with jQuery, using the $ selector to handle events, modify elements, and manage form interactions and alert messages.

Learn to wire a script file, connect it to the HTML, prevent default on hero form submission, and append the entered superhero to the list.

Validate form input and show a bootstrap danger alert when empty, add valid items to the list, and clear the input field using jQuery and CSS hide/show logic.

Explore automating a superhero movie vote feature with Protractor: increment vote counts, validate radio button selections, display a 'Thanks for voting' alert, and prepare to hide radios after submission.

Hide the voting section and display a Bootstrap primary alert in the movie voting interface. Hide by default, show the thanks for voting message, and reappear on refresh.

Add a simple nav search, normalize input to lower case, and implement three cases: empty input does nothing, 'Wolverine' shows an alert, others show zero results.

Builds a login overlay with email, password, and remember me, using bootstrap form and CSS styling to reveal the overlay for validation in the next video.

Create a login flow with validation alerts for missing email or password, manage the overlay on success, and implement remember me to persist credentials across logout.

Add the Beachy light styling to sections and images to achieve the light gray background, then finish the project and prepare to automate tests against the site.

Move the index file into the superhero folder, update the style sheet, image, and javascript paths, then fix the scrollbar by setting overflow-x: hidden and verify the site loads.

Learn how to install Protractor, run your first tests, and review the basic files and essentials you need to write tests.

Install the Java development kit from Oracle, download and run the installer, verify the installation with java -version, and configure path in Windows environment variables.

Install Node.js by downloading the current or lts version, complete the installation, then verify by obtaining a version number; if not recognized, uninstall and retry.

Install protractor and web driver manager globally via npm, verify with protractor --version, install and update browser drivers (chrome and gecko) to match the browser versions for reliable testing.

Protractor requires a config file and a test file to run tests. This lecture guides creating the config file, organizing folders, and configuring Jasmine, Chrome, and the test spec.

Create a spec file in a test folder and structure tests with Jasmine's describe and it blocks. Run a Protractor test with browser.get in Chrome to verify setup.

Practice interacting with page elements by selecting them with IDs and other selectors, then typing into login and password fields using Protractor.

Validate page elements with Protractor by using expect to compare text and attributes, verifying login messages and values with get text and get attribute; learn equal and contain checks.

Use beforeEach and afterEach in protractor to run setup and teardown around each test in a describe block, opening the page and reducing repetition.

Create page objects to centralize element references, turning repeated selectors like the login email field into a single reusable repository and easing maintenance when IDs change.

Create and organize page objects in Protractor by naming elements with suffixes like field or label and using id selectors to enable reuse across tests.

Learn to locate elements in Protractor using id, css selector, button text, and link text, including partial matches, with a reference cheat sheet.

Write test cases and test our sites with protractor, after setting up the protractor environment.

Learn to test a login page with protractor by creating test files and page objects, outlining test cases, and verifying elements with css selectors.

Create and organize page objects for header, roster, and voting sections, write Protractor specs, and validate element presence and interactions on the index page.

Develop automated tests for a superhero movie voting page using protractor, building page objects, configuring spec files, and validating radio choices, submit actions, and vote alerts.

Test the header and modals in a Protractor-based web app, using page objects to verify header elements, modal dialogs, login, and search interactions.

Validate logout behavior in protractor: verify the welcome screen appears with no saved email or password after logout, and that the remember-credentials option retains them for the next login.

Test the search feature with protractor by entering values like Wolverine and non-matching terms, triggering alerts, and validating both found and not-found scenarios using expected conditions.

Finalize Protractor tests by using wildcard file selection with underscore spec naming, configure the test run, and publish the site so tests run against a web page.

Learn to install and configure Jasmine Spec Reporter with Protractor to replace dots with descriptive test messages, showing which spec and test failed, plus configurable display options.

Configure Protractor Jasmine 2 screenshot reporter to generate shareable HTML reports with screenshots, enabling focused failed-spec captures and customizable report titles for team collaboration.

Upload your website to your personal site, post your Protractor test suite on GitHub, and link it to LinkedIn or your resume; start a Protractor project to automate the site.