Steps to easily access and click the button positioned at the center of the webpage

HTML code

<a href="" ng-click="select()" tab-heading-transclude="" class="ng-binding">RESUME</a>

Issue: Once the link is clicked on in our application, a new tab opens. In this new page, there is a resume tab located in the middle of the page that needs to be clicked on.

However, when trying to scroll and click on the resume tab, it is proving to be difficult.

This is the code I have tried so far:

browser.executeScript('window.scrollTo(0,250);');
element(by.partialLinkText("RESUME")).click(); 

Any assistance would be greatly appreciated.

Answer №1

Before attempting to click on an element, make sure to switch to the new tab first. Wait for the element to be present and in a clickable state using the ExpectedConditions instance and the elementToBeClickable() function in Protractor. Once the element is clickable, perform a click() action. Protractor's click() function should automatically scroll the page without requiring manual scrolling. Here's how it works -

browser.getAllWindowHandles().then(function(handles){
    browser.switchTo().window(handles[1]).then(function(){
        var elem = element(by.partialLinkText("RESUME"));
        browser.wait(protractor.ExpectedConditions.elementToBeClickable(elem), 10000)
        .then(function(){
            elem.click();
        });
    });
});

If the above code still doesn't work, consider adding a scroll line before clicking by resolving the promise that the functions return. Here's how you can do it -

var elem = element(by.partialLinkText("RESUME"));
browser.wait(protractor.ExpectedConditions.elementToBeClickable(elem), 10000)
.then(function(){
    elem.getLocation().then(function(loc){
        browser.executeScript('window.scrollTo('+loc.x+','+loc.y+');').then(function(){
            elem.click();
        });
    });
});

I hope this explanation helps.

Answer №2

"When you click on a link within our app, the page opens in a new browser tab"... Is it the New Tab of the browser? To access it, switch to the new tab before clicking on any buttons. Consider using browser.getWindowHandles(). This method will provide you with a set containing all open tabs.

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

Activate only the content of the parent div in a duplicated list using Javascript

Exploring the world of JavaScript, I am focusing on mastering event listeners and node lists. However, I have hit a roadblock when it comes to the JavaScript syntax for a specific query. My goal is to extract the innerHTML of each button and display it in ...

The Ajax Auto Complete function encounters an issue when attempting to assign a value to the TextBox

I have a Textbox that utilizes an Ajax Autocomplete function. The function is functioning correctly and retrieves values from the database, populating them in the TextBox as well. However, there is a button on the page that triggers a query, fetching som ...

Stylish hover effects displayed on disabled button using Styled Components

I am currently working on a button using Styled Components. However, even when the button is in a disabled state (:disabled), it still exhibits hover behavior that should not be present. I am wondering if there is a proper way to prevent hover effects when ...

Add the onclick function to $(document).ready for applying the desired functionality

I've been trying to create a fading effect for 3 divs on my page, similar to the one in this example: http://jsfiddle.net/x4qjscgv/6/ However, I want the fade animation to trigger only when a user clicks a button. I attempted to use the document.getE ...

What is the best way to save the current state data in AngularJS?

Encountering an issue here. To view the problem, check out this Plunker link -> In my Angular JS project, I need to save the current state data somewhere other than local storage. On one page, I have a list of models (cards), each containing two tabs. ...

Ensure the accurate port is specified in JavaScript to connect to a WCF service

I am working on a JavaScript project where I need to check which port number a WCF service is hosted on, out of a list of 10 different port numbers. I want to find out which port number the service responds to without any errors using AJAX JSON. Although ...

Clicking while holding down the control key in Chrome causes the frame on my website to

My website consists of two frames - the main menu on the left and the content displayed on the right. However, I have noticed that when users use control+click in Chrome to open a new tab, the iframe page is displayed without the menu. Is there a way for ...

Is it possible to leverage specific client-side Javascript APIs on the server-side?

Exploring APIs designed for web browsers that require their .js code to return audio streams. In a broader sense, these APIs provide byte streams (such as audio) for playback in the browser. Is it possible to use these APIs in server-side Javascript frame ...

Creating a Python script to dynamically update XPath expressions

My feature file looks like this: Scenario: Verify user can select list value Given Login user When User clicks on column Then Drop down list should be visible Then User can select any value from the drop down In my yml file, I have defined locators as: d ...

Issue with toggleClass not functioning properly after receiving data from an AJAX call

On my website, I have a link that triggers an AJAX request. However, when the response comes back and I try to use the toggleClass function in the following .js code snippet, it doesn't work as expected: $(document).ready(function(){ $("td").click( ...

Adding a border to dynamically generated content while excluding the outer borders using CSS - an easy guide

My current project involves establishing a grid system that dynamically populates content, resulting in an uncertain number of elements being created. At the moment, each element is placed within a flexbox container with 3 elements per row. If there are mo ...

Java script pop-up notifications always show up

This Text Goes Above the Form <?php require_once "core-admin/init-admin.php"; if( !isset($_SESSION['admin_username']) ){ $_SESSION['msg'] = 'page cannot be opened'; header('Location:admin_login.php&ap ...

What is the method used to create the scrolling effect on this website?

I am in the process of creating my own personal website and I would like it to function similar to the following example: Instead of the typical scrolling, I'm interested in transitioning between different sections on the page. Could this be achieved ...

Splicing using only one parameter will make changes to the array without deleting the entire array

let myArray = ['a','b','c','d','e']; console.log(myArray.splice(1)); console.log(myArray); Looking at the splice documentation, it mentions that not providing a delete parameter would remove all array item ...

How come the information isn't being transferred between components?

Is my method correct if I want to pass the this.prompt() function from TitleBar to Portfolio? This is what my index.html file looks like: var TitleBar = React.createClass({ render: function() { return( <div className="jumbotron"> ...

Using MVC4 and jQuery to unselect items from an Html.CheckboxListFor

In my search page, I am utilizing jQuery to toggle the visibility of different sections based on user input. Specifically, I have a Html.Textbox and Html.CheckboxListFor that are shown or hidden depending on whether there is any input in the textbox or if ...

Issue with XHR progress not functioning properly when cache is not cleared in CHROME

I will provide a detailed explanation of my issue. IMPORTANT-1: This issue arises with large files and under slow upload speed network conditions. IMPORTANT-2: The progress bar functions correctly in browsers like Edge. IMPORTANT-3: The problem only manif ...

Applying a consistent script with varying inputs on the same HTML page

Is it possible to create a JavaScript code that can be used across different sections of an HTML document? The goal is for the script to fetch data such as title, runtime, and plot from a specific URL request and insert this information into the appropriat ...

Discover pictures that perfectly match the optimal container dimensions

Looking to develop a function that can determine the best fitting image based on its size relative to its container. The image should not exceed the dimensions of the container either in width or height. The selected image should have minimal empty space ...

Trouble with updating scope values in the view within IONIC 1 and AngularJS

I recently implemented a feature to save the two most recent login details. The functionality works correctly, but I'm facing an issue where my view only updates upon refresh even though the scope values are being updated. I've tried using $scop ...