Navigating the mouse to a specific point with Protractor/Selenium: A step-by-step guide

Can one manipulate the mouse to specific coordinates on the screen or relative to an element in Protractor tests? I've noticed suggestions for using Robot with Java, but unfortunately that option is not available for JavaScript users like myself.

Answer №1

After hours of delving into Protractor and Selenium documentation, I managed to figure it out on my own. Here's a sample code snippet that demonstrates how you can pan plots by clicking and dragging:

  it('should pan plots when you click and drag', function() {
    var plot0 = element(by.css('.plot > canvas'));
    browser.actions()
      .mouseMove(plot0, {x: 100, y: 100}) // 100px from left, 100 px from top of plot0
      .mouseDown()
      .mouseMove({x: 400, y: 0}) // 400px to the right of current location
      .perform();
  });

Answer №2

After some experimentation, I managed to figure out how to simulate a swipe gesture on the web page.

var card = element(by.css('#card'));

browser.actions()
  .mouseMove(card, {x: 100, y: 100})
  .mouseDown()
  .mouseMove({x: 0, y: -400})
  .perform();

browser.sleep(500);

browser.actions()
  .mouseUp()
  .perform();

Answer №3

var graphDimensions = {// see [1]
  Width: 0,
  Height: 0
};
company_page.company_Chart_Graph().getAttribute('width')
  .then(function(width) {
    graphDimensions.Width = parseInt(width);
  });

company_page.company_Chart_Graph().getAttribute('height').then(function(height) {
  graphDimensions.Height = parseInt(height);

  console.log('W' + graphDimensions.Width);
  console.log('H' + graphDimensions.Height);

  var plot0 = company_page.company_Chart_Graph();
  browser.actions()
    .mouseMove(plot0, {
      x: 0,
      y: 0
    })
    .mouseDown()
    .mouseMove(plot0, {
      x: graphDimensions.Width,
      y: graphDimensions.Height
    })
    .mouseUp()
    .perform();

  browser.driver.sleep(23000);
  company_page.company_ReportDownload().click();
  browser.driver.sleep(23000);
});

[1]:

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

Is it possible to expand the Angular Material Data Table Header Row to align with the width of the row content?

Issue with Angular Material Data Table Layout Link to relevant feature request on GitHub On this StackBlitz demo, the issue of rows bleeding through the header when scrolling to the right and the row lines not expanding past viewport width is evident. Ho ...

What is the best way to insert an HTML attribute into a dynamically generated build script within Angular?

After running the ng build --prod command, Angular creates 4 scripts. One of these is called main.js. I am wondering if there is a way to dynamically add an HTML attribute to this script tag in the index.html file once the build process is complete. I nee ...

What is the best way to prevent certain search terms from appearing in search results on my website's search form

Is there a way to prevent certain search terms from showing up in my search box? For example, how can I block the search query for "dog"? <form id="headbar-search" action="search.php" method="GET" x-webkit-speech="x-webkit-speech"> <input type="t ...

I'm looking for a tag cloud widget that can handle JSON objects. Any suggestions?

Looking for recommendations on widgets that can generate a tag cloud using JSON objects. I have an array of JSON objects and would like to know the most effective method for creating a tag cloud with them. Thanks in advance! =) ...

Implementing AngularJS to display different divs according to the selected value

I am attempting to utilize the value of an HTML select element to toggle the visibility of specific div tags using AngularJS. Below is the code snippet I have been working with: <body ng-app="kiosk" id="ng-app" > <div class="page" ng-controll ...

HTML5 validation fails to activate

Addressing the issue head-on Check out the form I have created: <form action="<?php echo base_url()?>" method="post" id="formfield"> <center> <label>How much? <small>( Minimum of 100 )</small></label&g ...

What is the reason for the vertex shader failing to compile?

Recently diving into the world of WebGl, I decided to experiment with a simple example. Here is how I set up my script: Here's my setup script import testVertexShader from './shaders/test/vertex.glsl' import testFragmentShader from './ ...

React: when using the custom render method, the input-label pair is not being returned

In my code, I have a custom render method that is supposed to display a label and input pair. Unfortunately, nothing is being rendered on the screen. I have experimented with various solutions but have not been able to identify what is causing this issue. ...

How to Retrieve JSON Object Using Dynamically Generated String in Angular

Creating a controller in Angular involves retrieving URL parts and parameters using $statePrams. The $http service is then called to retrieve data from a JSON file. Once the data is received, the content of a specific object element - determined by $state ...

Prevent duplicate items in an array by utilizing the Map object to add elements

Looking for a way to update an array by adding new values while avoiding duplicates. I've implemented the usage of a Map object to keep track of existing values and tried filtering the new array accordingly. const [items, setItems] = useState([]); ...

Website search bar - easily find what you're looking for

I've tested this code and it works well on the basintap page. However, I'm interested to find out how I can search for something when I'm on a different page instead? <?php $query = $_GET['query']; $min_length = 2; if(strlen($ ...

The attempt to register with the grid using Appium was not successful: The error occurred while trying to start the Selenium Grid Node: getaddrinfo ENOTFOUND http http

I've hit a wall with this. I'm attempting to connect Appium (command line) through an attached device that is visible with adb devices. The grid is launched using the command below: java -jar ../../selenium-server-standalone-3.6.0.jar -role hub ...

Combining smaa and ssao postprocessing in THREE.js magnifies the visual quality of graphics

I am attempting to merge SMAA and SSAO within my THREE.EffectComposer as shown below: this.composer = new THREE.EffectComposer(this.renderer); // Setting up depth pass depthMaterial = new THREE.MeshDepthMaterial(); depthMaterial.depthPacking = THREE.RGBAD ...

Is it possible to generate a JS error from Go web assembly?

I attempted js.Global().Call("throw", "yeet") However, I encountered panic: 1:1: expected operand, found 'type' [recovered] wasm_exec.f7bab17184626fa7f3ebe6c157d4026825842d39bfae444ef945e60ec7d3b0f1.js:51 panic: syscall/js ...

Guide on exporting type definitions and utilizing them with npm link for a local package

I am in the process of developing a new testing tool called tepper as an alternative to supertest. My goal is to make this package available in both ESM and CJS formats. However, I'm encountering an issue where users of the library are unable to locat ...

Preventing Event Bubbling in Polymer 1.5 for iOS When Using iron-pages

Our single-page app utilizes iron pages and express-router for navigation. While it functions flawlessly on browsers and Android devices, we've encountered a bug when using iOS. The issue arises when switching pages by clicking a button. If the button ...

Triggering a page refresh with Framework7

Currently, I am in the process of developing a compact webapp utilizing the framework7 split-view-panel example. This eases navigation by providing a left-hand navigation bar that, upon clicking, loads a URL in the right-hand panel. However, I have notice ...

Tap the "show more" button to utilize Selenium for web scraping using Python

I'm struggling to scrape a website that has a show more button, but I can't seem to figure out how to click on it. The website in question is: Here's the code I'm using: from selenium import webdriver from selenium.webdriver.common.by ...

Substitute the Iframe element with Ajax technology

Currently, I am working on a project where I want to include previews of various websites within my own website. Right now, I am using Iframes to load the website previews and allow users to interact with them. For SEO purposes, I have decided to replace ...

Retrieve checkbox selected value using pug and node.js

How can I retrieve the value of a checked checkbox in order to redirect to (href="/player/edit/:id") or (href="/player/delete/: id"), and obtain the player id for editing or deleting? I have omitted other code details such as app.js which includes the ser ...