Having difficulty interacting with a button using Selenium and JavaScript

For some reason, I am experiencing difficulty in clicking the login button even though my code appears to be accurate and there are no iframes or windows present:

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

describe('SignupTest', () => {
    const driver = new Builder().forBrowser('chrome').build();

    it('signing up with a valid email and password', async () => {
        await driver.get('https://ca.letgo.com/en');
        const loginButton = driver.findElement(By.xpath("//button[contains(.,'Log In')]"));
        driver.execute("arguments[0].click()",loginButton)
        //await driver.findElement(By.xpath("//button[contains(.,'Log In')]")).click();
        //name=email
        //name=password
        //name=name
        //xpath=//span[contains(.,'Sign Up')]
        //await driver.sleep(20000);
    });

Answer №1

If you are looking to utilize JavaScript with Selenium, I recommend using Nightwatch.js, which integrates Selenium and Node.js.

In your specific scenario, you can follow the steps below:

WebDriverWait wait = new WebDriverWait(webDriver, timeoutInSeconds);
wait.until(ExpectedConditions.visibilityOfElementLocated(By.id<locator>));

or

wait.until(ExpectedConditions.elementToBeClickable(By.id<locator>));

You can also verify visibility before clicking by using isDisplay(). If it returns true, then proceed with the click action.

Answer №2

The phrase "Log In" is found within a nested child <span> element (inside the <button> tag), and you have the option to use either of these locating strategies:

  • Utilizing CSS_SELECTOR:

    button[data-test='login'][data-testid='login']>span
    
  • Employing XPATH:

    //span[text()='Log In']
    

Please remember: It is essential to implement a WebDriverWait when attempting to perform a click() action on the element containing the text "Log In".

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

Generate a distinct report folder for every execution by utilizing Selenium-Cucumber Maven

I'm currently utilizing extent reporting in my selenium-cucumber project to generate report files. However, each time the program runs, it overwrites the previously generated report. Is there a way to create separate report folders with timestamps app ...

Determining light sources for unique shapes using Three.js

After creating a custom geometry and successfully using geometry.computeFaceNormals() to achieve correct lighting, I encountered an issue when attempting to animate the geometry. Even though I call geometry.computeFaceNormals() within the animation loop, t ...

Tips for sending values via props to a different component and the common error message: "Consider using the defaultValue or value props instead of setting selected on the <option> element"

Currently, I am attempting to pass the selected value using the prop: handle state change, but encountering two errors. Error 1 : Instead of setting selected on <option>, use the defaultValue or value props. Error 2 : A property 'active' ...

Tips for dynamically updating the id value while iterating through a class

Here's the HTML snippet I am working with: <div class="info"> <div class="form-group"> <label class="control-label col-sm-2">Title</label> <div class="col-xs-10 col-sm-8"> <inpu ...

The package 'models' imported from is not found [ERR_MODULE_NOT_FOUND] error

I'm currently in the process of setting up my project to utilize absolute imports. To accomplish this, I've made adjustments to my jsconfig.json file as shown below: { "compilerOptions": { "baseUrl": "./src&quo ...

Having trouble displaying the selected button in React

Is it possible to include multiple functions within an onclick event? Check out the code snippet below: import React from 'react'; class Counter extends React.Component { state = { count: 0, inc: 'Increment', ...

"Enjoying a table header that scrolls freely with autoscroll feature

Resolved - http://jsfiddle.net/CrSpu/11704/ I'm facing an issue with a table that has autoscroll functionality. I am looking to freeze the header of the table when automatic scrolling occurs, or you can test it out using my code pen. I'm uncer ...

Tips for incorporating jQuery to load Rails form partials and submit them as a single form:

Trying to improve the readability of my Rails HTML code, I decided to extract certain portions into partials and then used jQuery to render these partials. However, a problem arose where the form seems disconnected after implementing this approach. It appe ...

Incorporate a binary document into a JSPdf file

I am currently utilizing JsPDF to export HTML content into a downloadable PDF. Explore the following example which involves taking some HTML content and generating a downloaded PDF file using JsPdf import React from "react"; import { render } fro ...

Various tasks to be executed on a shared element

Struggling with implementing actions on a grid component without using a router in Next.js. Here is the current code snippet: const handleActions = (btnPress, row) => { if (btnPress === "Add") {/* implementation */} else if (btnPr ...

Monitor elements in real-time as they are inserted into the DOM using a Chrome Extension

In the process of developing a Chrome extension, I am tackling the task of removing or hiding specific elements based on their id/class. While accomplishing this after the DOM is loaded poses no issue, it does result in a noticeable "blink" on the page dur ...

Developing a webpage that navigates seamlessly without the hassle of constantly refreshing with

I am in the process of creating a website that is designed to run everything within the same file, but I am unsure about how to locate study materials for this project. For example: In a typical website scenario -> If I am on index.php and I click on ...

ERROR: Expo TaskManager Notifications [TypeError: Attempting to call an undefined function (near '...Notifications.presentLocalNotificationAsync...')]

I'm currently trying to figure out how to send notifications whenever a task is triggered, but I keep encountering an error that I can't seem to fix. Here's the error message: TaskManager: Task "background-fetch" failed:, [TypeError: unde ...

Texture on plane is not displaying properly in Three.JS

Seeking assistance! I've been struggling all day to successfully load a texture onto my plane in Three.JS. Every time I attempt to add the desired link, it either fails or *poof* my plane disappears mysteriously. Please lend me your expertise with Thr ...

What is the process for triggering a function event on click (or any other function) within a browser's activation?

Some time ago, I was trying to figure out why the onclick event wasn't working when I clicked on a specific area of the browser. After consulting a guide, I discovered the issue and fixed it. It turns out that the problem was quite simple, and now I u ...

New post: "Exploring the latest features in Angular

Looking for help with integrating Angular and SpringREST to fetch data from the backend? Here's my situation: I need to retrieve a JSON string from the backend using a POST request, send it to my site's hosted link, and display it on the user int ...

If a user cancels, the radio button in Vue 3 will revert back to

I'm encountering a problem with radio buttons in vue 3. When passing an object from the parent component to the child for data display, I want to set one version as default: <template> <table> ... <tr v-for="(v ...

Having issues sending multiple variables to PHP through Ajax

Trying to pass three variables through the URL using Ajax - one constant and two from a date picker. The constant passes fine, but the date variables are only passing as their names. Here's the code for the date pickers: <tr> ...

Can you explain the function of "app.router" in the context of Express.js?

When looking at the default app.js file generated by express.js, I came across the following line: ... app.use(app.router); ... This particular line of code has left me perplexed for a couple of reasons. First, upon consulting the express api documentati ...

Is it possible to share a Vue.js component by "transferring" it rather than duplicating it?

In my comment system project using Vue.js, I have over 300 comments to manage. Each comment has an admin section that appears when the cursor hovers over it. Duplicating the admin section component for each comment is not ideal as it creates unnecessary l ...