Background: In the process of UI automation, text boxes will be encountered. After input content, association options will appear, which are similar to the drop-down box but different from the drop-down box. For example, Ctrip:

Above, want to select a certain input from the content of association, how to achieve?

Ok, understand, super powerful, immediately F12 open, right click to locate the page element, you will find that the association box will disappear, cannot locate at all; Sorrow is the soul of man.

@Test(enabled = true) void test_text_autoComplate() throws InterruptedException { driver.get("https://www.ctrip.com"); String partialText = "Beijing "; String actulText = "actulText "; Driver.findelement (by.id ("HD_CityName")).sendkeys (partialText); driver.findelement (by.id ("HD_CityName")).sendkeys (partialText); WebElement element = driver.findElement(By.xpath("//div[starts-with(@id,'address_filterContainer_uid_')]")); // When you find the next step, it's a bit like the next option, looking for a list set from element, but you can't locate it because it's not an Option child under the select tag, and even though the xpath above was handwritten, The subset under the div tag is unknown at all.Copy the code

Before solving the above problem, let’s look at another example or the lenovo input box of Baidu input box is also locatable element:

Analysis: Through F12 debug mode, can locate the text box label, the associated elements can be found by element location, click Consle, input: document.getelementByID (“aria-option-3”)

All of these elements can be found in the Element column, so you need to select one of the associated content, the test code is as follows:

/** * @beforeClass * create driver objects */ @test (enabled = false, Public void test1() throws Exception {driver.get(cont.expurl); String partialText = "Beijing "; Driver.findelement (by.id ("hotel-destination-hp-hotel")).sendKeys(partialText); driver.findelement (by.id ("hotel-destination-hp-hotel")). WebElement ele = driver.findelement (by. id("typeaheadDataPlain")); List<WebElement> eles = ele.findelements (by.tagname ("li")); For (int I = 0; i < eles.size(); I ++) {system.out.println (" associative selection: "+ eles.get(I).gettext ()); } Thread.sleep(2000); For (WebElement el: eles) { if (el.getText().equals(eles.get(eles.size() - 2).getText())) { el.click(); Thread.sleep(2000); break; }}} /** * @afterClass * Finish the test, exit */Copy the code

The associative operation of this website, and the associative operation of Ctrip, should be the same, the difficulty is to find the label element under the input box. How do I know what a child tag is before I right click it and it’s gone?

There are two methods:

A, of course not Baidu, but ask development ah, test their own company’s products, do not ask development ask Baidu, which effective still use teach you?

The second, of course, is to challenge yourself, because it’s more exciting to solve these kinds of problems. How to seize this fleeting opportunity? Background development can debug, does front-end development not debug? F12 also has the debug function. The operations are as follows:

If you want to go back to the opening image and select subtree Modifications to debug, then you can determine what elements are under the DIVs and locate them by finding them

The test code is as follows:

/** * This box will flash away when F12 or other browsers are looking for elements. * Solution: F12 set a breakpoint before and after the element is displayed. Step debugging can make the element not disappear. * * @throws InterruptedException */ @Test(enabled = true) void test_text_autoComplate() throws InterruptedException { driver.get("https://www.ctrip.com"); String partialText = "Beijing "; String actulText = "actulText "; Driver.findelement (by.id ("HD_CityName")).sendkeys (partialText); driver.findelement (by.id ("HD_CityName")).sendkeys (partialText); WebElement element = driver .findElement(By .xpath("//div[starts-with(@id,'address_filterContainer_uid_')]")); If (element.isdisplayed ()) {List<WebElement> elements = element.findelements (By) .cssSelector("div.sug_item>a>span.city")); // for (int i = 0; i < elements.size(); i++) { // System.out.println(elements.get(i).getText()); For (WebElement ele: WebElement ele: WebElement ele: WebElement ele: WebElement ele: WebElement ele Elements) {if (actultext.equals (el.gettext ())) {system.out.println (" result selected correctly "); ele.click(); Thread.sleep(5000); break; If (ele.gettext ().equals(calls.get (calls.size () - 2).gettext ())) {if (el.gettext ().equals(calls.get (calls.size () - 2).gettext ())) System.out.println(" result select shi :" + ele.gettext ()); ele.click(); Thread.sleep(5000); break; }}}}Copy the code

Alas, this is a review, I didn’t write down the way to solve this kind of problem before, and now I need to study again to complete it, although it took a lot of time, but it was worth it! Disadvantages: time-consuming, advantages: improve the thinking of solving problems. Wish you mutual encouragement!

This article uses the article synchronization assistant to synchronize