Speed Up Non‑Angular Protractor Tests by Turning Off Angular Sync

Problem: Flaky, Slow Tests on Non‑Angular Pages

When a Protractor test lands on a plain HTML page, the framework still waits for Angular’s digest cycle to finish. If the page contains no Angular code, that wait is wasted. In large suites, the cumulative delay can turn a fast test into a slow, flaky one.

Thesis: Disable Angular Synchronization to Cut Test Time

Calling browser.waitForAngularEnabled(false) tells Protractor to skip the automatic Angular wait. On non‑Angular pages this removes the unnecessary digest‑cycle check and speeds up execution. The trade‑off is that you must handle any asynchronous operations yourself.

How to Disable Sync in Your Test

Protractor exposes a simple API. Add the call at the start of a spec or within a beforeEach hook that only applies to non‑Angular pages.

describe('Static page tests', function() {
  beforeEach(function() {
    // Turn off Angular sync for this suite
    browser.waitForAngularEnabled(false);
  });

  it('should load the landing page quickly', async function() {
    await browser.get('https://example.com/landing');
    const header = element(by.css('h1'));
    await browser.wait(protractor.ExpectedConditions.visibilityOf(header), 5000);
    expect(await header.getText()).toEqual('Welcome');
  });
});

Key points:

• Scope: Disable sync only for the specs that hit non‑Angular pages.
• Permissions: No special privileges are needed; the call is client‑side.
• Placeholder: Replace https://example.com/landing with your target URL.
• Expected checks: The test should finish noticeably faster than the same spec with sync enabled.
• Risk: If you forget to re‑enable sync, subsequent Angular specs may fail.

Concrete Example & Verification

Run the following two specs in the same project to see the difference:

1. With sync enabled (default):

   it('loads non‑Angular page with sync', async function() {
     await browser.get('https://example.com/landing');
     const header = element(by.css('h1'));
     await browser.wait(protractor.ExpectedConditions.visibilityOf(header), 5000);
     expect(await header.getText()).toEqual('Welcome');
   });
   

2. With sync disabled:

   it('loads non‑Angular page without sync', async function() {
     browser.waitForAngularEnabled(false);
     await browser.get('https://example.com/landing');
     const header = element(by.css('h1'));
     await browser.wait(protractor.ExpectedConditions.visibilityOf(header), 5000);
     expect(await header.getText()).toEqual('Welcome');
   });
   

Measure the wall‑clock time for each spec. You should observe a measurable reduction (often 10‑30%) in the sync‑disabled run. To confirm the flag is active, add a quick check:

const isSyncEnabled = browser.getProcessedConfig().params.waitForAngularEnabled;
console.log('Angular sync enabled:', isSyncEnabled);

After the non‑Angular spec, re‑enable sync if you plan to run Angular tests in the same session:

browser.waitForAngularEnabled(true);

Trade‑Offs & Limitations

• Manual waits: Without Angular sync, you must use browser.wait or custom async scripts for any asynchronous behavior on the page.
• Scope danger: Disabling sync globally (e.g., in beforeAll for the entire suite) will break specs that rely on Angular’s automatic waiting, leading to intermittent failures.
• Hybrid apps: If your application contains both Angular and non‑Angular sections, toggle sync only when navigating to the non‑Angular part.
• Future updates: Protractor’s API for this call remains stable across 7.x and 8.x releases, so you can safely use it in both.

Actionable Next Steps

1. Identify all non‑Angular pages in your test suite.
2. Wrap those specs with browser.waitForAngularEnabled(false) at the top.
3. Replace any implicit waits with explicit waits (e.g., ExpectedConditions).
4. Run a timed comparison to quantify the speed‑up.
5. Re‑enable sync after the non‑Angular specs or in an afterEach hook if global tests follow.
6. Document the change in your test‑strategy guide so new contributors know when to toggle sync.

By following this pattern, you’ll keep your Protractor suite fast and stable without sacrificing the convenience of Angular’s built‑in synchronization.