Navigate to the date selector and select the following month

https://i.sstatic.net/AdWVs.png

<button class="mat-calendar-next-button mat-icon-button" mat-icon-button="" type="button" ng-reflect-disabled="false" aria-label="Next month"><span class="mat-button-wrapper"></span><div class="mat-button-ripple mat-ripple mat-button-ripple-round" matripple="" ng-reflect-centered="true" ng-reflect-disabled="false" ng-reflect-trigger="[object HTMLButtonElement]"></div><div class="mat-button-focus-overlay"></div></button>

... [Calendar data contents] ...

I am experiencing difficulty clicking on the 'Next Month' button and selecting a date from this calendar while it's within a dialog pop-up. The dialog pop-up can be identified using element(by.css('.mat-dialog-container')). Any advice or guidance provided would be greatly appreciated!

javascriptangularjsprotractorautomated-testse2e-testing

Answer №1

Here is a helpful snippet to interact with a calendar in Protractor:

 const EC = protractor.ExpectedConditions;

        const datePickerToggle = element(by.tagName('mat-datepicker-toggle'));
        browser.wait(EC.visibilityOf(datePickerToggle), 50000);
        datePickerToggle.click();
        const nextButton = element(by.className('mat-calendar-next-button'));
        browser.wait(EC.visibilityOf(nextButton), 50000);
        nextButton.click();

Answer №2

1. Familiarize yourself with the webtable concept first. I recommend starting by reviewing Mukesh Otwani's tutorial on handling dynamic calendars before proceeding here. 2. Click on the calendar icon. 3. Navigate to the desired link. 4. Select the date from the calendar. Avoid using element.all to iterate through and select the date, as it may result in a stale element reference error. 5. Refer to Protractor's official website for guidance on using filters to click on an element instead of iterating through each one individually. 6. When passing the date as an argument, ensure you do not hardcode it. Give this approach a try, but if unsuccessful, I can provide you with code to help resolve 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

Migration of old AngularJS to TypeScript in require.js does not recognize import statements

I am looking to transition my aging AngularJS application from JavaScript to TypeScript. To load the necessary components, I am currently utilizing require.js. In order to maintain compatibility with scripts that do not use require.js, I have opted for usi ...

javascriptangularjstypescriptrequirejsumd

When I navigate to the URL using a router-link, the v-for in my Vue.js component renders properly. However, if I manually type the URL or refresh the page, the v-for fails to render

Whenever I navigate to a specific URL that showcases icons of characters from a game, everything functions as expected and the icons are displayed. However, upon refreshing the page, the icons vanish. If I manually enter www.example.com/champions, the ico ...

javascriptvue.js

What is the process for transforming a method into a computed property?

Good day, I created a calendar and now I am attempting to showcase events from a JSON file. I understand that in order to display a list with certain conditions, I need to utilize a computed property. However, I am facing difficulties passing parameters to ...

javascriptvue.js

Variables are losing their way in the vast expanse of self-submitting

I have a form that needs to be submitted on the same page (index.php) and I want to capture the entered information as a JavaScript variable. <?php $loginid = $_POST[username] . $_POST[password]; ?> Here is some basic code: <script> var pass ...

javascriptphphtmlforms

Angular: exploring additional challenges with dynamic filtering

I'm currently working on making dynamic filters functional and I believe I'm close to achieving it. However, it seems like the model isn't correctly passed back to the watch function. Even with the initial set of filters, it doesn't see ...

angularjs

How can I fetch a value from a database and set it as the selected option in a

I am facing an issue with the usage of the selectpicker plugin from Bootstrap in order to select multiple items. My requirement is to create a modal for editing where the data is fetched from previous records, particularly an array. I am looking for a way ...

javascriptjqueryhtmllaravelbootstrap-selectpicker

Learn how to smooth out a path in d3.js before removing it during the exit transition

Description: My interactive multiple line chart allows users to filter which lines are displayed, resulting in lines entering and exiting dynamically. Desired effect: I aim to smoothly transition a line to align perfectly with the x-axis before it disappe ...

javascriptd3.js

What is the process for executing code on a server by clicking a button?

In my Next.js application, there is a file named dummy.js with the following content: class Dummy extends React.Component{ static async getInitialProps(ctx){ return { dummy : 'abc'}; } displayHelloWorld(params) { cons ...

javascriptreactjsnext.js

Executing Browser in the Background with Protractor/Selenium

When using protractor for testing, I often find that there is no need to actually view the browser in action. The tests can be time-consuming, and what truly matters is the final outcome. Is there a way to run these tests in the background or hide the br ...

selenium-webdriverprotractore2e-testing

A step-by-step guide on configuring data for aria's autocomplete feature

Currently, I am implementing aria autocomplete and facing an issue while trying to populate data from the server into the selection of aria autocomplete. I have tried setting the selected property of the aria autocomplete object, but it doesn't seem t ...

javascriptphpjsontypescriptselect

Creating functional dropdown menus with popperjs in the latest Bootstrap version 5

Currently, I am attempting to implement dropdown menus in Bootstrap 5. According to my research, this feature requires Popper.js integration, but I am uncertain of the correct way to include it in my Laravel project that utilizes Laravel Mix. I have made ...

javascriptcsslaravelpopper.jsbootstrap-5

JavaScript form validation problem: Warning for identical responses in the MOST and LEAST sections

I've encountered a challenge while working on an HTML and JavaScript form for a personality test. The issue revolves around validation, particularly when the form includes multiple questions with both "MOST" and "LEAST" radio button options. One spec ...

javascripthtmlcss

What is the best way to notify the JSON code below using jQuery?

I have received a JSON response after using the Reverse Geocoding API from Google. The response includes various address components such as route, sublocality, locality, and political information. { "results": [ { "address_components": [ ...

javascriptjsongoogle-api

Issues with Grunt functionality after installation on Ubuntu

I successfully installed Grunt by running the following commands in the terminal: sudo apt-get install nodejs sudo apt-get install npm npm install -g grunt-cli After executing npm install -g grunt-cli, here is the output from the terminal: (output he ...

javascriptnode.jsubuntugruntjsnpm

Leveraging redux within your NEXT.JS project

While working on my Next.js application, I have integrated Redux and Redux Saga. I am trying to incorporate server-side rendering for making HTTP requests: export const getStaticProps = wrapper.getStaticProps(async ({ store }) => { store.dispatch(g ...

javascriptreactjsreduxnext.jsredux-saga

Capturing an image of an HTML5 canvas that includes an image object: tips and tricks

After creating a canvas and adding various objects like images, clipart, and text to it, I encountered an issue. When capturing a snapshot of the canvas with only text using the method `canvas.toDataURL()`, the snap is correct. However, when I include an i ...

javascripthtmljsonhtml5-canvasfabricjs

How to download an Excel file (xlsx) using AngularJS and WebApi

I am currently working on a project that requires me to download a report in xlsx format. Despite successfully generating the report file on the server and receiving it on the client side, I am facing an issue where the file is not opening and is resulting ...

javascriptc#angularjsexcelasp.net-web-api

Preventing Shift: How to Only Replace the Chosen Vue Draggable Item Without Affecting Other Grid Items

Let's try an example to demonstrate: https://codesandbox.io/s/j4vn761455?file=/src/App.vue:112-116 Step 1: Drag item 4 to where 5 is. Notice how 4 and 5 switch positions. Step 2: Now, drag item 1 to position 6. Watch as 1 moves to where 6 was, pushi ...

javascriptvue.jsvuedraggable

Issue: Debug Failure. Invalid expression: import= for internal module references should have been addressed in a previous transformer

While working on my Nest build script, I encountered the following error message: Error Debug Failure. False expression: import= for internal module references should be handled in an earlier transformer. I am having trouble comprehending what this erro ...

javascripttypescriptnestjs

Turkish text is not appearing correctly on the UIWebview when embedded in HTML

One of the challenges I encountered in my iOS project involved programming a UIWebView to load content in both English and Turkish from a web service. To accomplish this, I formatted the HTML string with the necessary headers and saved it locally before pr ...

javascripthtmliosobjective-cuiwebview