How To Debug Protractor Tests for Selenium Test Automation?

TypeScript for Test Automation: What It Is and Why Use It

TypeScript is a strongly typed superset of JavaScript that compiles (transpiles) down to plain JavaScript. Everything valid in JavaScript is valid in TypeScript, but you gain an optional static type system on top. For test automation, that type system is the whole point.

Automation engineers are migrating to TypeScript because it moves error detection from runtime to development time. In untyped JavaScript, a mistyped page-object method or a wrong argument only surfaces when the test runs, often as a confusing failure deep in a suite. In TypeScript, the compiler and your IDE flag it as you type, before you ever run the test. For large, long-lived automation suites, catching these compile-time errors early is a major reliability and maintenance win.

Key Benefits of TypeScript in QA: Type Safety and Autocompletion

The value of TypeScript in QA comes down to a few concrete, day-to-day benefits:

• Static typing: Types on page objects, fixtures, and helpers mean the compiler rejects mismatched or missing values before execution, preventing a whole class of flaky, hard-to-trace failures.
• IDE autocompletion (IntelliSense): Editors like VS Code know the shape of your framework and your own code, so methods, locators, and parameters autocomplete. You write tests faster and with fewer typos.
• Early error detection on the CLI: The TypeScript compiler surfaces compile-time errors in your terminal and CI, so broken tests are caught in the pipeline rather than after a long run.
• Safer refactoring: Rename a method or change a signature and the compiler shows every call site that needs updating, which keeps large suites maintainable.

Test Automation Frameworks That Support TypeScript

The reason TypeScript is now the default for JavaScript-based automation is that the modern frameworks support it natively, no bolt-on required. This is also why the ecosystem moved away from legacy tools like Protractor.

• Playwright: Ships with first-class TypeScript support and type definitions out of the box, making it the most common modern choice for end-to-end testing.
• Cypress: Supports TypeScript with minimal configuration, giving typed commands and custom-command definitions.
• Jest: Works with TypeScript via ts-jest or Babel, ideal for unit and component tests with type checking.

Protractor, by contrast, reached end-of-development in 2023. If you are choosing a framework today, Playwright or Cypress with TypeScript is the modern path.

How to Configure TypeScript for Testing (tsconfig.json)

TypeScript is configured through a tsconfig.json file at the root of your project. It tells the compiler how to type-check and transpile your tests. A minimal setup for a test automation project looks like this:

{
  "compilerOptions": {
    "target": "ES2019",
    "module": "commonjs",
    "strict": true,
    "esModuleInterop": true,
    "moduleResolution": "node",
    "baseUrl": ".",
    "paths": {
      "@pages/*": ["src/pages/*"]
    },
    "types": ["node"]
  },
  "include": ["tests/**/*.ts", "src/**/*.ts"]
}

• strict: Turns on the full set of type checks, the single most valuable option for catching bugs early.
• moduleResolution: Controls how imports are resolved; "node" matches how Node.js and most frameworks resolve modules.
• paths / baseUrl: Path mapping lets you import page objects as @pages/LoginPage instead of long relative paths.
• include: Tells the compiler which test and source files to type-check and compile.

Most runners (Playwright, Jest via ts-jest, ts-node) compile TypeScript for you, but you can also compile manually with npx tsc to type-check without running the tests.

Can We Use TypeScript in Selenium?

Yes. Selenium WebDriver has official JavaScript bindings (selenium-webdriver on npm) that ship with TypeScript type definitions, so you can write Selenium tests in TypeScript directly. You install the bindings and the Node types, write your tests in .ts files, and run them with a TypeScript-aware runner or after compiling with tsc.

This bridges the gap for teams with an existing Selenium footprint: you keep Selenium's mature, W3C-standard WebDriver protocol and cross-browser reach while gaining TypeScript's type safety and autocompletion. Pair it with a test runner like Jest or Mocha for structure, and you have a modern, typed Selenium suite, without depending on the deprecated Protractor wrapper. You can run those TypeScript Selenium tests at scale across real browsers on TestMu AI's cloud automation testing grid.

What Are The Problems To Debug Protractor tests?

While testing a web application, you’ll often encounter bugs in your code. The quality of certain modules might not be apt or there are browser compatibility testing issues. These bugs are caught while you debug your Protractor tests. You might face a few problems along the way, these are as follow :

• Testing of a web application is tricky due to its dependency on the entire system .
• You’ll require a different WebDrivers for various operating systems and browsers for performing cross browser testing.
• The Selenium test automation scenarios follow a sequence of actions and the output of the current test cases serves as the input of the further test cases and hence there is a dependency.
• The long error messages encountered while performing automation tests might be tough to comprehend.
• It becomes difficult to distinguish between errors and issues which are either related to browsers or test scenario processes.

Austin Siewert

Co-Founder, Steadfast Systems

Discovered @TestMu AI yesterday. Best browser testing tool I've found for my use case. Great pricing model for the limited testing I do 👏

2M+ Devs and QAs rely on TestMu AI

Deliver immersive digital experiences with Next-Generation Mobile Apps and Cross Browser Testing Cloud

Sign up with googleSign up with Email

You can take this certification as proof of expertise in the field of test automation with JavaScript to empower yourself and boost your career.

Here’s a short glimpse of the Selenium JavaScript 101 certification from TestMu AI:

What Are The Types Of Failures You Need To Debug In Protractor Tests?

There are major types of failure scenarios that are encountered while performing Protractor testing. Below are some of the main reasons for failure:

• Expectation Failure
• WebDriver Failure
• WebDriver Unexpected Failure
• Protractor Angular Failure
• Protractor Timeout Failure

Here I’ll further explain these failures in this Protractor tutorial.

This is one of frequently occurring and the most common failures encountered when the normal flow execution of the test fails. This results in an expectation failure.

If we encounter a scenario where an element or attribute is not found or even when there is an uncertainty in the address requested by the browser. This results in a Web Driver failure error as the requested command is not executed by the web driver.

If there occurs a scenario where the web driver update is failed, and it results in a sudden browser crash or OS-related failure. This state is known as web driver unexpected failure.

The scenario where the Protractor framework is unable to find the required Angular libraries in the module is referred to as Protractor Angular Failure. This type of failure also occurs when the useAllAngular2AppRoots attribute is missing from the configurations and it also causes the test process to expect multiple elements but only processing with the single root element.

When the test suite gets stuck in a loop for a long period of time and as a result, the data is not returned in the speculated time. This type of failure is known as Protractor Timeout Failure.

Debug Protractor Tests On Online Selenium Grid Platform

In order to scale your testing efforts and test on multiple browsers and OS you can use a cloud Selenium Grid to perform cross browser testing. You can execute the same test script to debug Protractor tests in the cloud Selenium grid with minimal configuration changes that are required to build the driver and connect to the TestMu AI hub. Below is the updated script with the required changes for testing with cloud Selenium Grid for this Protractor tutorial.

test_config.js

// test_config.js //
// The test_config.js file servers as a configuration file for out test case //
 
LT_USERNAME = process.env.LT_USERNAME || "irohitgoyal"; // Lambda Test User name
LT_ACCESS_KEY = process.env.LT_ACCESS_KEY || "123456789"; // Lambda Test Access key
 
exports.capabilities = {
  'build': ' Automation Selenium Webdriver Test Script ', // Build Name to be display in the test logs
  'name': ' Protractor Selenium Debugging Test on Chrome',  // The name of the test to distinguish amongst test cases //
  'platform':'Windows 10', //  Name of the Operating System
  'browserName': 'chrome', // Name of the browser
  'version': '79.0', // browser version to be used
  'visual': false,  // flag to check whether to take step by step screenshot
  'network':false,  // flag to check whether to capture network logs
  'console':false, // flag to check whether to capture console logs.
  'tunnel': false // flag to check if it is required to run the localhost through the tunnel
  };
 
// setting required config parameters //
exports.config = {
   directConnect: true,
 
   // Desired Capabilities that are passed as an argument to the web driver instance.
   capabilities: {
      'browserName': 'chrome'  // name of the browser used to test //
   },
 
   // Flavour of the framework to be used for our test case //
   framework: 'jasmine',
 
   // The patterns which are relative to the current working directory when  
 
protractor methods are invoked //
 
   specs: ['test_debug.js'],
// overriding default value of allScriptsTimeout parameter //
      allScriptsTimeout: 999999,
      jasmineNodeOpts: {
// overriding default value of defaultTimeoutInterval parameter //
      defaultTimeoutInterval: 999999
   },
   onPrepare: function () {
      browser.manage().window().maximize();
      browser.manage().timeouts().implicitlyWait(5000);
   }
};

test_debug.js

// test_config.js //
// The test_config.js file servers as a configuration file for out test case //
 
LT_USERNAME = process.env.LT_USERNAME || "irohitgoyal"; // Lambda Test User name
LT_ACCESS_KEY = process.env.LT_ACCESS_KEY || "123456789"; // Lambda Test Access key
 
exports.capabilities = {
  'build': ' Automation Selenium Webdriver Test Script ', // Build Name to be display in the test logs
  'name': ' Protractor Selenium Debugging Test on Chrome',  // The name of the test to distinguish amongst test cases //
  'platform':'Windows 10', //  Name of the Operating System
  'browserName': 'chrome', // Name of the browser
  'version': '79.0', // browser version to be used
  'visual': false,  // flag to check whether to take step by step screenshot
  'network':false,  // flag to check whether to capture network logs
  'console':false, // flag to check whether to capture console logs.
  'tunnel': false // flag to check if it is required to run the localhost through the tunnel
  };
 
// setting required config parameters //
exports.config = {
   directConnect: true,
 
   // Desired Capabilities that are passed as an argument to the web driver instance.
   capabilities: {
      'browserName': 'chrome'  // name of the browser used to test //
   },
 
   // Flavour of the framework to be used for our test case //
   framework: 'jasmine',
 
   // The patterns which are relative to the current working directory when  
 
protractor methods are invoked //
 
   specs: ['test_debug.js'],
// overriding default value of allScriptsTimeout parameter //
      allScriptsTimeout: 999999,
      jasmineNodeOpts: {
// overriding default value of defaultTimeoutInterval parameter //
      defaultTimeoutInterval: 999999
   },
   onPrepare: function () {
      browser.manage().window().maximize();
      browser.manage().timeouts().implicitlyWait(5000);
   }
};

As you can see you can perform the test script in the cloud by just adding a few lines of code that are required to connect to the TestMu AI platform. You are required to generate the desired capability matrix and through this, you can specify the environment on which you would like to execute our tests. Also, you need to add the TestMu AI username and access key which uniquely identifies with the TestMu AI platform. Here is the link to visit TestMu AI Selenium desired capabilities generator.

We can see that our Selenium test automation script got executed successfully on the platform and you can also execute the same set of commands that we used on the terminal while using the pause and debugger methods to debug Protractor tests. Below is the output on running the test:

Also Read: Automated Cross Browser Testing With Protractor & Selenium

Wrapping It Up!

This brings us to an end to this Protractor tutorial on how to debug Protractor tests for Selenium test automation. To sum up, I explained the challenge faced during the end to end application test. I further got into the detail of using the framework and in-built methods to debug Protractor test cases in an interactive manner. It can be put to good use especially when performing end to end testing and taking screenshots whenever required. Executing these tests on the cloud platform also has its own benefits in saving costs on the infrastructure setup and maximizing test coverage.

Do share your view on this Protractor tutorial with us in the comment section down below. Also, help us to share this article with your friends. That’s all folks! Happy Debugging!