The search operation or clicking on a text box cannot be carried out by Selenium/Protractor

Looking at a code snippet from a website, I aim to extract the 5th line which is located within the following code segment:

<input type="text" placeholder="Enter Workflow Name"

Here is the Code:

<div class="workflow-container ng-scope" data-ng-controller="sourceCode.Designer.uiComponents.conciergeScreen.templates.NewWorkflowController">
<div class="input">
    <div class="wrapper top" data-ng-class="{'fill': hosted === true}">
        <label class="welcome">What should your workflow be called?</label>
        <input type="text" placeholder="Enter Workflow Name" class="workflow-name-textbox ng-valid ng-not-empty ng-touched ng-dirty ng-valid-parse" data-ng-class="{'error': errors.error}" autofocus="" data-ng-focus="select($event)" data-ng-model="conciergetitle" data-ng-model-options="{ updateOn: 'default blur', debounce: { default: 300, blur: 300 } }" data-ng-change="inputchange(designeritems)" data-ng-keyup="$event.keyCode == 13 &amp;&amp; createnewstudioitem(designerItems[0], conciergetitle, $event)" style="">
        <div class="errogory">
            ...
    </div>

The intention is to interact with the textbox by clicking on it to clear its text value. A test script has been incorporated in an attempt to achieve this goal:

describe("New Screen", function () {
    it("Should give textbox a new name", function () {

        browser.sleep(10000);
        console.log('Enter new name');
        var editName = element.all(by.className('.workflow-name-textbox'));

        editName.first().click().then(function () {
            console.log('Clicked on Create');

        })
        browser.sleep(10000);
    })

An error message persistently appears stating: Index out of bound. Trying to access element at index: 0 ...

If modifications are made to the script as shown below:

var editName = element.all(by.css('.workflow-name-textbox'));

editName.click().then(function () {
    console.log('Clicked on Create');

Although no errors arise, there seems to be no action being triggered upon clicking.

Given that Protractor is functioning correctly based on previous navigations, any suggestions or recommendations to troubleshoot this issue would be greatly appreciated.

Answer №1

I had to navigate two levels deep within the iframes:

// Entering parent iframe
browser.switchTo().frame('Iframe1');
// Moving into child iframe
browser.switchTo().frame('Iframe2');
// Locating and clearing text in the name textbox
var NewTextBox = element.all(by.css('.name-textbox'));
NewTextBox.clear().then(function () {
    console.log('Clearing text');

Answer №2

Have you considered trying this approach instead of using element.all? The element.all method returns a list of elements, while the element method returns only a single element.

  • You can try defining NewTextBox as element(by.css('.workflow-name-textbox'));

Alternatively,

  • You can define NewTextBox aselement(by.xpath('//input[@placeholder='Enter Workflow Name']'));

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

Validation for an empty string in the value of an input element

Why is my empty string validation not functioning correctly for the value property of an HTMLInputElement after trimming? The issue lies in the code within the storeOnEnter function. My intention is to update the state only when the input field is empty. ...

Only the final defined document is instantiated by the Swagger-ui-express module

Currently, I am working on a Typescripted nodejs server and facing an issue with defining different swagger paths for separated controllers. The problem is that the swagger-ui-express module only displays the last defined document in the specific route. I ...

Creating a function within a module that takes in a relative file path in NodeJs

Currently, I am working on creating a function similar to NodeJS require. With this function, you can call require("./your-file") and the file ./your-file will be understood as a sibling of the calling module, eliminating the need to specify the full path. ...

Press the button to launch a window

URL: Click here for more information Upon clicking the "Add" button, a pop-up window will appear prompting you to enter your credentials. Despite my attempts using Selenium/Python to trigger the popup window by clicking the button, I have not been success ...

Error in TypeScript code for combined Slider and Input onChange functionality within a Material-UI component

HandleChange function is used to update the useState for Material-UI <Slider /> and <Input />. Here is the solution: const handleChange = (event: Event, newValue: number | number[]) => { const inputValue = (event.target as HTMLInputEle ...

Element cannot be found using ID or xpath

I'm having trouble finding a specific button on a website. My goal is to add 101 items to my basket by clicking the "Dodaj" button to see if an alert pops up. <div class="input-group input-group-sm"> <span class="input-group-btn"> ...

Effortlessly collapsing cards using Angular 2 and Bootstrap

Recently delving into Angular 2 and Bootstrap 4, I set up an about page using the card class from Bootstrap. Clicking on a card causes it to expand, and clicking again collapses it. Now, I want to enhance this by ensuring that only one card is open at a ti ...

Developing a type declaration file in TypeScript for an external node package (react-signature-canvas)

In this case, I'll be using React-Signature-Canvas as a demonstration. When the react-signature-canvas node module is installed in my project directory, it typically appears like this: react-signature-canvas build index.js src ...

In Angular, I aim to invoke the this.addDispatchToReceive method whenever the outcome is successful within each forEach iteration

How can I ensure that the values from this.stockItemDispatch are obtained in this.addDispatchToReceive(); during each iteration of a loop, instead of only getting the last stock value? The issue is that the subscribe function runs after the foreach cycle ...

What is the best way to perform an AJAX request in Typescript with JSON data?

Currently, I am delving into the realm of AJAX and encountering some hurdles when attempting to execute an AJAX request with parameters. Specifically, I am facing difficulties in sending JSON data: My approach involves utilizing Typescript in tandem with ...

The unique Angular type cannot be assigned to the NgIterable type

As a newcomer to Angular, I was introduced to types and interfaces today. Excited to apply my new knowledge, I decided to enhance my code by utilizing a custom interface instead of a direct type declaration: @Input() imageWidgets: ImageWidget; Here is the ...

Creating encoded objects for a content-type of `application/x-www-form-urlencoded`

Upgrading AngularJS Code to Angular 2+ - Http Issue I am in the process of converting some legacy AngularJS code (specifically Ionic 1) to the latest version of Angular (Ionic 4), and I've encountered a troubling issue. Previously, in every HTTP POS ...

Driver not found by Browserstack/Selenium

I am facing an issue with BrowserStack while running my tests. The test runs perfectly without any errors when executed locally, and even the sample test provided by BrowserStack passes flawlessly. Below is the error message I encountered: test/silver_au ...

Encountering a peculiar challenge with the select_by_index() function in Selenium using Python

I'm currently developing a small program to automate tasks that involve logging into a website using Selenium, identifying a drop-down box, selecting an option from the list, and performing additional actions on the web page. It should be a straightfo ...

What is the process for utilizing acceptSslCerts with RemoteWebdriver?

My goal is to get selenium to overlook SSL errors, but so far I haven't been successful. I've come across the acceptSslCerts capability, but when using Firefox it doesn't seem to make a difference. ...

Use React to dynamically render a table by mapping over an array to generate

I'm facing an issue where I am trying to display an array within a specific section of a table, but it's not displaying. Even though all the values are being fetched correctly. const renderReturnReasons = () => { dailyReportDetailItem.re ...

Dynamic Angular component loading with lazy loading

In my Angular 4.1.3 project, I am currently developing a mapping application that incorporates lazy-loading for various tool modules. At present, the tools are loaded within the map using a router-outlet. However, I now need to expand this functionality to ...

Just starting out with React and encountering the error: Invalid element type, a string was expected

I seem to be going in circles with the following issue as I try to load the basics of a React app into the browser. An error message stating 'Element type is invalid: expected a string (for built-in components) or a class/function (for composite c ...

What is the reason for the unusual incrementing of the index in JavaScript?

When running this code snippet, the first console log correctly shows 0. However, the second console log displays 1. Why is the index being incremented before the loop has ended? for (var i = 0; i < this.offlineTimeSlots.length; i++) { con ...

Guide on importing npm packages without TypeScript definitions while still enabling IDE to provide intelligent code completion features

I am currently utilizing an npm package that lacks type definitions for TypeScript. Specifically, I'm working with the react-google-maps library. Following their recommended approach, I have imported the following components from the package: import ...