What is the best way to select an item from a random menu using Protractor?

I'm new to using Protractor, TypeScript, and JavaScript, so I'm unsure of what exactly I might be doing wrong.

The web element simply returns an object and I am unable to perform the action of clicking on the link. How can I retrieve the linkText? I've tried using other methods like id, css, tagname, but for some reason, the object seems to get lost at some point. Has anyone else experienced this issue?

//html (within a frame)

<div class="menuLabel" id="menuLabel1"> </div>
<div class="submenubox" id="submenu1"> </div>


<div class="menuLabel" id="menuLabel2">
  <table>
    <tbody>
      <tr>
        <td></td>
        <td class="menuText">
          <nobr>
            <a onmouseover="menuShow(event,'2')" href="javascript:void(null)" class="ml">Example Main Menu</a>
          </nobr>
        </td>
      </tr>
    </tbody>
  </table>
</div>

<div class="submenubox" id="submenu2">
  <table border="0" cellpadding="0" cellspacing="0">
    <tbody>
      <tr>
        <td class="anything">
          <table border="0" cellpadding="0" cellspacing="0">
            <tbody>
              <tr>
                <td>
                  <table border="0" cellpadding="0" cellspacing="0">
                    <tbody>
                      <tr> </tr>
                      <tr>
                        <td class="secNav">
                          <a onmouseover="subMenuShow(event, '2', '1')" ; hoverText='Example Sub Menu' target href="trade/new.action">...</a>
                        </td>
                      </tr>
                    </tbody>
                  </table>
                </td>
              </tr>
            </tbody>
          </table>
        </td>
      </tr>
    </tbody>
  </table>
</div>
//Page Object file
export class PageObject {
public mainMenuLink: WebElement = element(By.linkText('Example Main Menu'));
public subMenuLink: WebElement = element(By.linkText('Example Sub Menu'));

async getMenuAction(): Promise<void> {

//Hover over the Main Menu, causing a table with submenu to appear
await browser.actions().mouseMove(this.mainMenuLink);

//Click on the submenu link
await browser.actions().mouseMove(this.subMenuLink);
await browser.actions().click(this.subMenuLink);

    }
}

Answer №1

Don't forget to include the .perform() method in your code. According to the official documentation:

When creating a sequence of user actions using this driver, it will not be executed until you call webdriver.ActionSequence#perform.

Here's an example:

 browser.actions().mouseMove(this.subMenuLink).click().perform();

Answer №2

You don't have to physically hover over the element with your mouse.

You can simply reach the element.

Furthermore, you could easily target the element by its unique class.

element(by.cssContainingText('.secNav', 'Example Main Menu')).click();

or

element(by.css('.secNav')).click();

This method should work, please let me know if it resolves the issue.

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

I desire to rearrange the items within several arrays of lists

I currently have an array set up like this 0: (5) ["2", "X", "8", "11", "15"] 1: (5) ["1", "5", "X", "X", "14"] 2: (5) ["X", "4", "7", "10", "13"] 3: (5) ["X", "3", "6", "9", "12"] My goal is to swap the position of the digit 1 with the position of digi ...

Suggestion for implementing numerous ajax countdown timers (one call per second)

I am currently developing a system with 100 countdown timers that each make an ajax call every second to retrieve the endTime from the database and update the countdown time. The reason for calling this every second is because the endTime can be altered. ...

No content is shown when the div height is set to 100%

My div content is being loaded from a PHP file (total of 15 items) using jQuery. When the height of the div reaches 500px, all the content is displayed perfectly. However, when I try to set the height to 100%, some of the data is missing. The rest of the ...

Remove duplicate values from ng-options

Check out this plunker example I have a collection of cars and their corresponding available years: ["Volvo", "VW", "Audi"] --> [2006, 2007, 2008] ["Ford", "Honda", "Jaguar"] --> [2008, 2009, 2010, 2011] Note: The year 2008 is duplicated. This ...

Is it possible to apply draggable functionality in the same way you attach events to an arbitrary node and a selector?

Here is a possible solution: function myFunction(){/*.....*/} $("body").on("click", "li.itemlist", function(){ alert("ping"); }); This code sets up a click event for all li.itemlist elements under the body element. However, is there a way to sim ...

Prevent Repetition of Meta Descriptions and Keywords within Next.js

I'm currently working on my website using Next.js. In order to enhance the SEO performance of my site, I am making an effort to steer clear of duplicate meta tags. My Inquiry According to Next's official documentation, they suggest that using t ...

Avoid Refreshing the Page When Pressing the Like Button

I've been working on code for liking a post and saving the value to a database using server-side code. However, I'm running into some issues when the page refreshes after clicking the like button. I tried using event.preventDefault() in my JavaSc ...

The Motion of Rotating and Moving Items

Rotating and translating objects can be tricky. While you can successfully perform both actions, the challenge arises when rotating objects as their orientation gets lost -- causing the objects to move in the direction they are facing. if( keyboar ...

How to Set Profile Picture Using Angular 7 and JSON Server REST API

https://i.sstatic.net/VQcAd.png After successfully creating a CRUD app with Angular using Json server and the HttpClient module, I saved contact objects in a JSON file named db.json. {"contact": [ { "name": "", "email": "", "phone": "", "image": ...

Struggling to construct a regular expression that can accurately identify and match the article tag

Struggling to create a regex pattern that captures the text within an article tag. Take a look at my article tag below: <article id="post-82" class="post-82 post type-post status-publish format-standard hentry category-publishing"> <div ...

Struggling with integrating jQuery and .php within a Wordpress environment

My goal is to create a user-friendly translation site at . To achieve this, I have developed a simple PHP code that utilizes an external translation API through the use of GET requests. The code functions correctly as shown below: <?php if(!empty($_GET ...

Load JSON data in Javascript with the condition where the 'id' is equal to 'x'

I have a coding dilemma where I need to extract specific information from a .json file in JavaScript and load it into an array. function loadContacts(filter) { var contacts = (function () { var contacts = null; $.ajax({ 'asy ...

How to position a new div within its parent element using CSS without causing the rest of the content to

I'm currently working on implementing a short pop-up feature in my web application that will appear when a user clicks on a code snippet to copy it. However, I'm facing difficulties with preventing the pop-up from causing a shift in the parent di ...

The margin and width of a div element with the position set to fixed and display set to table-cell are not rendering correctly

Is there a way to keep my .nav-container position: fixed; without creating a gap between it and the .page-content at certain window widths? When I set the position to fixed, a small white line appears between the red background of the .nav-container and th ...

How can I eliminate the appearance of tile seams while applying textures to a mesh?

I am currently working on a project where I am creating a sphere and attaching images to each face of the sphere. My code constructs a sphere with 12 sections horizontally and 6 sections vertically. To properly tile the textures, I set the wrap to repeatin ...

Implementing mandatory object keys in TypeScript

Suppose you have these type definitions: type Panel = 'store' | 'logs' You aim to construct an object containing key => ReactChild pairs, where the keys are restricted to the values in Panel. const components = { store: StoreC ...

What is the best way to add a checkbox tag in Rails using JavaScript?

I am attempting to use javascript to append the values from option fields to checkboxes in Rails. Here is a snippet of my javascript code: $("#regions option").each(function(){ $("#region-checkboxes").append('<li><%= check_box_tag "region ...

(firebase-admin) Issue: Why is the client showing as offline when it's actually online?

import * as admin from "firebase-admin"; import DataModel from "../types/firebase"; export class FirebaseManager { db = admin.database(); constructor() { this.db = admin.database(); if (this.db === undefined) { throw ...

Error message encountered: 'GlobalStyles' is not a valid export from the module '@material-ui/system' (referenced as 'SystemGlobalStyles')

./node_modules/@material-ui/core/GlobalStyles/GlobalStyles.js Error encountered while trying to import: 'GlobalStyles' is not exported from '@material-ui/system' (imported as 'SystemGlobalStyles'). I am currently grappling wi ...

Perform database update in MySQL using an array as a condition

I am faced with a situation where I have an array of unique IDs, as shown below: const myIds = [2, 3, 4]; In addition, I possess a database structured like this: +-----+------+ | id | seen | +-----+------+ | 0 | 0 | | 1 | 0 | | 2 | 0 | ...