What is the best way to choose a random text from a dropdown menu that contains several div elements using Playwright?

web element Is it possible to choose a "random" text using div tags from a dropdown? I am attempting to pick any random country from the dropdown with the following code in Playwright:

const selectCountry = this.page.locator('<this locator>')
const randomCountry = faker.location.country()
await selectCountry.fill(randomCountry)

Sometimes it types, but it doesn't retain the value after submitting. I suspect that it needs to actively select the value from the dropdown using the mouse pointer or arrow keys, but I am uncertain how to do that randomly.

I have also tried the recommendations provided here: Playwright - select random option, without success. Any assistance would be greatly appreciated. Thank you very much.

javascripttypescriptautomationdropdownplaywright

Answer №1

Based on the information provided in your screenshot, it appears that there is no select element present. In order to select the desired option from the list, you can try using a straightforward click method, much like the following example demonstrates:

test(`choose a movie`, async ({ page }) => {
  const movieTitle = "The Godfather";
  await page.goto("https://mui.com/material-ui/react-autocomplete/");

  const dropdownLocator = page.locator("#combo-box-demo");

  await dropdownLocator.click();
  await page.getByRole("option", { name: movieTitle, exact: true }).click();
  await dropdownLocator.blur();

  await expect(dropdownLocator).toHaveValue(movieTitle);
});

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

Ways to invoke a class method by clicking on it

My initialization function is defined as follows: init: function() { $("#editRow").click(function() { <code> } $(".removeRow").click(function() { <code> } } I am trying to find a way to call the class method removeRow directly in the onc ...

javascriptjquerytreegrid

Unusual behavior observed with ES5 filter functionality in Node.js

My goal is to use ES5 : filter to refine the data provided below. { "EmailAddress": "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="167c797356736e777b667a73e98175d3faf7">[email protected]</a> ...

javascriptnode.jsecmascript-5

In JavaScript, the code is designed to recognize and return one specific file type for a group of files that have similar formats (such as 'mp4' or 'm4v' being recognized as 'MOV')

I am working on a populateTable function where I want to merge different file types read from a JSON file into one display type. Specifically, I am trying to combine mp4 and m4v files into MOV format. However, despite not encountering any errors in my code ...

javascriptjson

Using jQuery, what is the best way to conceal a Div while the scroll bar is in motion?

Is there a way to make the #menu fade when the scroll bar is in motion, creating a cleaner interface? I'm hoping to find code that will detect scroll bar movement, allowing the #menu to gradually fade out after 1 second of scrolling and come back aft ...

javascriptjqueryscrollvisibilityfade

Issue with updating data variable from watcher on computed property in Vue.js with Vuex

Snippet: https://jsfiddle.net/mjvu6bn7/ I have a watcher implemented on a computed property in my Vue component. This computed property depends on a Vuex store variable that is set asynchronously. Despite trying to update the data variable of the Vue comp ...

javascriptvuexvue.jsvuejs2

Steps for setting up and shutting down the server during integration testing with Express and Supertest on NodeJS

One issue that continues to plague me is the "Address already in use::3000" error which pops up whenever I run my tests. This is what I currently have set up: package.json "scripts": { "test": "jest --watchAll --verbose --runInBand --maxWorkers=1" ...

javascriptnode.jsexpresssupertest

No response text returned from the local Ajax request

Currently, I am facing a challenge while attempting to send an ajax call from the client to my server containing data related to an input parameter. The issue is that although I can view the data in my server's console, it does not display in the brow ...

javascriptjqueryajaxnpm

Navigating in React Navigation: Techniques to Directly Access a Specific Index in a Datasource

I am a beginner at React Native and I have been working on developing a simple recipe app. Everything was going well until I reached the point where I needed to navigate to a specific recipe from my dataset. I am looking to create a singleRecipe.js compone ...

javascriptreactjsreact-nativenavigationreact-navigation

The Handsontable popup autocomplete editor is unfortunately truncated by the horizontal scrollbar

I have implemented an autocomplete feature on all columns in my project. However, I am facing an issue where the autocomplete editor gets cut off by the horizontal scrollbar. You can see the problem demonstrated in this jsfiddle link. Here is some code re ...

javascriptjquerycsshandsontable

Trouble retrieving data from multiple added rows in Django dynamic fields template

I am currently developing a template that dynamically generates multiple rows of content. After submitting the form, only the last generated row is being saved and I'm not able to retrieve data from all the rows created by the template. I suspect th ...

javascriptpythondjangotemplatesdynamic

TestCafe Environment Variables are not properly defined and displaying as undefined

Exploring TestCafe and diving into the world of automated testing. Trying to master the tools with guidance from Successfully executing code on my Windows setup! fixture`Getting Started`.page`http://devexpress.github.io/testcafe/example`; test("My ...

node.jstypescriptnpmtestcafeui-testing

Remove character when the button is clicked as long as the input value is not equal to 0

I am currently using the code below to remove a character from an input field: function deleteChar(input) { input.value = input.value.substring(0, input.value.length - 1) } However, if there is only one character in the input field and the function is ...

javascriptjquery

The language translation in Angular 6 remains static and unchanged until the page is refreshed

My website supports 5 different languages with English as the default. When I switch languages in the header component... header.component.ts onSetLanguage(lang: string) { this.trans.use(lang); this.currentLang = localStorage.setItem("currentLa ...

angulartypescript

With a tree arrangement flanking the Transfer module on either side

I have successfully implemented the antd's Transfer component using the examples provided in the documentation. I was able to create a tree transfer box that looks like this: https://i.sstatic.net/OEPPK.png However, I am wondering if there is a way t ...

javascriptreactjsantd

When attempting to build and run in a production environment, an error message stating "Module './static' cannot be located" is displayed

I've been working on setting up the Forge-RCDB project for production environment. Using Windows Powershell, I executed the following commands: npm run build-prod $env:NODE_ENV ="production" npm start However, I encountered the following errors afte ...

javascriptreactjsautodesk-forge

Automatically unselect the "initially selected item" once two items have been selected in Material UI

As someone new to web development, I'm struggling with a specific task. Here is the issue at hand: I have three checkboxes. If box1 and then box2 are selected, they should be marked. However, if box3 is then selected, box1 should automatically unchec ...

javascriptreactjsmaterial-ui

Unable to access current props within useEffect block

When I use useEffect with the parameter props.quizStep, my function fn (which is a keydown event listener) is unable to access the current value of props.quizStep. I'm puzzled as to why it's not working properly. Can you help me understand? Bel ...

javascriptreactjstypescriptreact-hooksfrontend

The exclude option in Nest JS middleware does not prevent the middleware from running on excluded routes

I'm having an issue with excluding certain routes from the middleware. The .exclude option doesn't seem to be working as expected, as the middleware is still being applied to the excluded routes. Here is the code for the Middleware: https://i.st ...

node.jstypescriptexpressnestjs

I keep encountering an attach() error every time I try to close a modal that contains a vee-validated form

Every time I try to close a bootstrap modal (using bootstrap-vue) that includes a vee-validated "update" form with vue.js, I encounter the following error: main.js:477686 Uncaught (in promise) Error: [vee-validate] Validating a non-existent field: "#35". ...

javascriptvue.jsbootstrap-modalbootstrap-vuevee-validate

Tips for maintaining the selected state of a row using Typescript and the option tag

Here is the code for a dropdown: <div class="col-md-6"> <label for="inertiaStart" style="float: left; width: 17%;">Inertia Start</label> <select ng-model="selectedShiftChannel" style="float: left; width: 70%;height: 26 ...

htmlangulartypescript