Encountering a "require is not defined" error when trying to launch a Selenium

I have developed a basic selenium application and now I am looking to implement a graphical user interface for it.

Here is the code snippet:

index.html:

<html>
  <head>
    <meta charset="UTF-8" />
    <title>Selenium App</title>
    <link rel="stylesheet" href="index.css" />
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="9cfee9f0f1fddcacb2a5b2a8">[email protected]</a>/css/bulma.min.css">
    <script defer src="selenium.js"></script>
  </head>
  <body>
    <div class="align">
      <h1>Selenium App</h1>
      <button id="start" class="button is-primary">Start</button>
      
  </div>
  </body>
</html>

selenium.js:

startButton.onclick = initiateSelenium;

const {Builder, Browser, By, Key, until} = require('selenium-webdriver');

async function initiateSelenium() {
    let driver = await new Builder().forBrowser("chrome").build();
    await driver.get('https://google.com');
    await driver.findElement(By.id("L2AGLb")).click()
    await driver.findElement(By.xpath("/html/body/div[1]/div[3]/form/div[1]/div[1]/div[1]/div/div[2]/input")).sendKeys("selenium",Key.RETURN);
}

I keep encountering an error message:

Uncaught ReferenceError: require is not defined

Any suggestions on how to solve this issue?

Answer №1

If you are working with selenium.js, make sure to remove this line of code:

startButton.onclick = selenium; // (This is specific to browser Javascript)

Keep in mind that selenium.js is a Node.js file and cannot be directly used in an index.html file like this:

<script defer src="selenium.js"></script>

Look into using Npm selenium-webdriver instead.

To access your Selenium code from an html file through a server, consider using technologies like:

Express is known for its user-friendly features, making it a popular choice for developers.

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

Experience the quick sort programming algorithm in action using Vue.js without the hassle of dealing with Promises

I am currently experimenting with the quicksort algorithm visualization using Vue.js for self-educational purposes. However, I am facing some difficulties with async/await implementation. Although array filling and shuffling seem to work fine (although I a ...

Right-align each item when selecting none

Is there a way to change the style of just one of the elements select or option, without affecting the style of both? I attempted to align the select element to the right, while leaving the option elements aligned to the left. However, this did not work a ...

Refine the Crossfilter dimension according to the specified date range

What is the proper way to filter a date range using Crossfilter? The code above does not seem to yield any results, but I am certain that there are records within that specified time period. Var myDimension = CrossFilterObj.dimension(function(d) { retur ...

Tips for keeping the Menu bar at the top of the page while scrolling from the middle

I came across a technique mentioned here that I wanted to implement. I used this jsfiddle link (which worked well) to create my own version http://jsfiddle.net/a2q7zk0m/1/, along with a custom menu. However, now it seems like it's not working due to a ...

Vue component lifecycle hook to fetch data from Firebase

Looking for a solution with Vue 2 component that utilizes Vuefire to connect declaratively with a Firebase real-time database: import { db } from '../firebase/db' export default { data: () => ({ cats: [] }), firebase: { ...

Stopping the page from scrolling back to the top when an asynchronous update occurs in Angular

Once the asynchronous request is complete, I dynamically add a new element to the top with this code snippet: Array.prototype.unshift.apply(scope.conversation, conversation.data.message); The issue arises when the added element causes the scroll position ...

Selenium Timeout Error: Locator Not Found

Once again, I am struggling with the locator and trying to figure out the correct syntax and code. Here is the code I was attempting to execute: wait.until(EC.presence_of_element_located((By.XPATH, "//div[@class='col-xs-6']//input[@class=&a ...

Error message: Component is unable to access the $store property because it is undefined

After doing extensive research and reading numerous similar questions on various platforms, I am still unable to resolve my issue. I have a component containing a login form that triggers a method to dispatch a $store action for logging in the user via fi ...

What is the significance of utilizing app.set() and app.get() in applications?

Is there a way to simplify this code: app.set('port', (process.env.PORT || 3000)); const server = app.listen(app.get('port'), () => { console.log('Server|Port: ', app.get('port')); }); Here is an alternative ...

Is there a way to modify the color scheme of my webpage while utilizing Bootstrap?

As I delve into programming with Bootstrap, I encountered an issue while attempting to change the background color of my body. Even though I used the following CSS code: body { background-color: #eba; width: 100%; height: 100%; } The color change ...

Transforming a JSON object property value from an array into a string using JavaScript

I am facing an issue with an API call I am using, as it is sending objects with a single property that contains an array value (seen in the keys property in the response below). However, I need to work with nested arrays in order to utilize the outputted v ...

The behavior of JavaScript replace varies between Chrome and IE

This JavaScript code successfully replaces a string in Chrome: myUrl = someUrl.replace('%2C%7B%22itn%22%3A%5B%22%20guidelines%20%22%5D%7D', ''); However, when tested in Internet Explorer, it does not replace the string as expected. T ...

Save and showcase SQL, PHP, HTML, and JS code exactly as it is preserved in MYSQL database

Is there a way to store and display complete JS, PHP, and HTML code in MySQL without altering the format? The stored PHP code should appear as: <?php echo "something"; ?> And not just: something For JavaScript: <script> document.write(&ap ...

Integrating TypeScript into an established create-react-app project

Struggling to integrate TypeScript into an existing create-react-app? I've always added it at the beginning of a project using create-react-app my-app --scripts-version=react-scripts-ts, but that's not working this time. The only "solution" I co ...

Issue: The n-api module is not being recognized due to an error stating "Cannot read property 'indexOf' of undefined"

After developing a C++ module using n-api and compiling it with cmake-js, I encountered an issue when trying to integrate it into my electron-vue application. Surprisingly, the module worked fine in other projects without electron-vue. However, every attem ...

What would you name this particular element?

I want to create a unique slider design but I'm unsure where to begin or how to search for information because I don't know the correct terminology. Does this type of slider have a specific name? I heard about Marquee, but that seems like someth ...

Adjusting the PHP variable value using an onclick event

I am facing a challenge with increasing a variable $count = 10; every time a user clicks on the <a id="load-more" href="#">Load more</a> Despite trying various methods such as onclick, variable equations, and functions, I have been unsuccessfu ...

The parameters for Vue.js @change events are consistently returning as 0 whenever a file is uploaded by clicking on the picture

Check out my JSFiddle here:: https://jsfiddle.net/includephone/o9gpb1q8 I've encountered an issue involving the @change event on an input field. My goal is to create a carousel of images with 4 images per slide. Data Object Structure data: functio ...

What steps can I take to make sure that all Selenium webdrivers created by my program are properly terminated upon the program ending?

Is there a way to ensure that all new instances of webdrivers are terminated automatically when my program ends? This means making sure the new process will close even if the program crashes or if an explicit .quit() is not added in the code. Edit: One po ...

Interact with an SVG inside an img tag with Selenium using Java

The SVG I am attempting to hover over is in an img tag. I have attempted to use Actions class moveToElement method WebElement element = driver.findElement(By.xpath("")); actions.moveToElement(element); actions.click().build().perfo ...