angular2 with selenium webdriver: Issue with resolving 'child_process' conflict

I followed these steps:

ng new typescript-selenium-example
npm install selenium-webdriver --save

I also made sure to copy chromedriver to my /Application.

I updated the app.component.ts file as shown below:

import { Component } from '@angular/core';
import { Builder, By, until } from 'selenium-webdriver';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  constructor() {
    var driver = new Builder()
    .forBrowser('chrome')
    .build();

    driver.get('http://www.google.com/ncr')
        .then(_ => driver.findElement(By.name('q')).sendKeys('webdriver'))
        .then(_ => driver.findElement(By.name('btnG')).click())
        .then(_ => driver.wait(until.titleIs('webdriver - Google Search'), 1000))
        .then(_ => driver.quit());
    console.log('hi');
  }
  title = 'app works!';
}

However, I encountered the following errors:

ERROR in ./~/selenium-webdriver/net/portprober.js
Module not found: Error: Can't resolve 'child_process' in '/Users/myname/tmp/typescript-selenium-example/node_modules/selenium-webdriver/net'
 @ ./~/selenium-webdriver/net/portprober.js 20:11-35
 @ ./~/selenium-webdriver/chrome.js
 @ ./~/selenium-webdriver/index.js
 @ ./src/app/app.component.ts
 @ ./src/app/index.ts
 @ ./src/main.ts
 @ multi main

ERROR in ./~/selenium-webdriver/firefox/binary.js
Module not found: Error: Can't resolve 'child_process' in '/Users/myname/tmp/typescript-selenium-example/node_modules/selenium-webdriver/firefox'
 @ ./~/selenium-webdriver/firefox/binary.js 25:14-38
 @ ./~/selenium-webdriver/firefox/index.js
 @ ./~/selenium-webdriver/index.js
 @ ./src/app/app.component.ts
 @ ./src/app/index.ts
 @ ./src/main.ts
 @ multi main

ERROR in ./~/selenium-webdriver/io/exec.js
Module not found: Error: Can't resolve 'child_process' in '/Users/myname/tmp/typescript-selenium-example/node_modules/selenium-webdriver/io'
 @ ./~/selenium-webdriver/io/exec.js 20:21-45
 @ ./~/selenium-webdriver/remote/index.js
 @ ./~/selenium-webdriver/index.js
 @ ./src/app/app.component.ts
 @ ./src/app/index.ts
 @ ./src/main.ts
 @ multi main

Answer №1

I encountered a similar issue when one of my tests had a flawed beforeEach method. The function was attempting to access a global variable before it was properly initialized. Perhaps this insight will assist you?

Additionally, as noted in the comments, this issue can also arise from incorrect imports, such as:

import {describe} from 'selenium-webdriver';

or

import {beforeEach} from "selenium-webdriver/testing";

Answer №2

One issue I encountered was mistakenly importing the incorrect library in a component.

Here is what needed to be corrected:

import { EventEmitter } from 'selenium-webdriver';

The fix involved changing it to:

import { EventEmitter } from '@angular/core';

After making this adjustment, everything started working as expected.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Chrome continues to crash unexpectedly, in spite of using chromedriver

My Selenium automation script was running smoothly with Chrome v.58, but since the upgrade, my test cases are failing randomly due to the error chrome not reachable. I have reviewed the chromedriver log file and discovered that the initialization request ...

Is the AngularJS email validation triggering too soon?

My challenge involves validating an email field in angularjs using the following code: <input type="email" ng-model="email" class="form-control" name="email" ng-required="true" placeholder="Email Address"> <span ng-show="loginForm.email.$touched ...

Trouble with Mui theme not being applied when inside a wrapper component

In my project using React with typescript and MUI version 5.4.2, I have been attempting to manage all styles in a single file by enclosing everything inside my App.tsx component. Problem: The custom MUI theme is not being applied throughout my application ...

Rails: Parameters are displayed in the console but cannot be accessed via params

I sent a get request to the following url: groups/:id.json Upon checking my Rails server console, this is the output: Processing by GroupsController#show as JSON Parameters: {"id"=>"11"} However, despite these parameters being passed, I am unable t ...

The message from the renderer in Selenium has taken longer than expected to be received

Since the latest version of Chrome (64.0.3282) was released yesterday, I have been encountering an error that occurs sporadically: An error message reads: Timed out receiving message from renderer: 600.000 Running approximately 2,000 Selenium tests wit ...

How can Enums be utilized as a key type for transmitting properties in Vue?

After stumbling upon a helpful method on Stack Overflow that demonstrated how to use an enum to define an object, I decided to implement this in my Vue project. export enum Options { randSize = 'randomSized', timer = 'showTimer', ...

Jest is simulating a third-party library, yet it is persistently attempting to reach

Here's a function I have: export type SendMessageParameters = { chatInstance?: ChatSession, // ... other parameters ... }; const sendMessageFunction = async ({ chatInstance, // ... other parameters ... }: SendMessageParameters): Promise<vo ...

Store the active tab in AngularJS with Bootstrap to easily remember and display

After creating a basic AngularJS application with the Bootstrap directive, I noticed that some of my pages have tabs. The issue arises when I am on a tab other than the first one and click a link to navigate to another view. Upon returning (using either th ...

Exploring the method of creating multiple nested states within various parent components while utilizing identical templates

I have developed a mobile site for purchasing, renewing, and transferring domains. The app consists of 4 templates that work together in a functional chain. Buy : Search -> (login if necessary?) -> Pay -> Confirmation Renew : Choose -& ...

Developing jasmine tests for an Angular directive

When implementing the directive below, it will check and load a template with either "pass", "fail", or "required" as values based on certain conditions. if(parent value == required){ 1. if the value is true -> $scope.msg = "fail" -> loads the templ ...

What is the best way to retrieve the name of a dynamic form in a Controller

How can I retrieve the dynamic form name in my controller? See below for the code snippet: HTML <form name="{{myForm}}" novalidate> <input type="text" ng-model="username" name="username" required/> <span ng-show="(submit & ...

What are the properties used in functional components of React?

Seeking guidance on passing React component props to another component: interface IMyComponent { props: Props<any> } const MyComponent: FC = ({ props }) => { } Previously, I attempted to utilize the React.Props type after consulting this que ...

AngularJS not refreshing the view

I'm having an issue in my app where I calculate the total bill and display it on my view. The first time, everything works fine. However, when I increment the $scope.bill_total, the view is not updating even though I can see the change in the console. ...

Having trouble with AngularJs and moment.js integration?

Looking to create a simple webpage using Angular Js for date calculations. Utilizing moment.js from http://momentjs.com/ Below is the current code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> ...

Unable to display array retrieved from successful http get request on the webpage

I've been struggling to output the result from the success function in this specific way, but unfortunately, I haven't had any success. The code works fine when it comes to returning values for UpcomingEvents and displaying them in HTML, but when ...

Do injecting dependencies cause heavier loading times?

When working on new controllers, I often find myself copying and pasting code from others. However, some of the code includes dependencies that will not be used in the new controllers. I'm wondering if leaving these unnecessary injections will impact ...

Creating a unique type with a suffix of `px`

Understanding how to create a Position type class is clear: class Position { x: number = 0; y: number = 0; } However, I now require the x and y values to be integers with the suffix of px, like this: const position = { x: '1px', y: &ap ...

Using *ngFor to iterate through a nested collection in an Angular 2 application

I'm currently working on a challenge involving drilling down to iterate over an array within another collection of arrays within an Angular 2 application. To start off, I have set up my component to subscribe to an observable in the ngOnInit lifecycle ...

Unlock the Power of Typescript: Using the Browser Console to Access Functions

Scenario Within the file ts/app.ts, the following function exists: function foo() { console.log('Hello Word'); } After successful compilation with Webpack, it generates a file named bundle.js. To load this file, use the following script tag ...

Discovering the Email Address input field on Disneyworld's login page for sending text with Selenium in Python

I'm currently working on a project to automate the login process for my Disney World account. However, I've hit a roadblock in locating the email address element. While I've been successful in automating other buttons on the Disney World web ...