Как создать список элементов в разделе «Выбрать категорию (США)», отображаемых по-разному с помощью HtmlUnitDriver и HtmlUnit безголового браузера?

Question

Как создать список элементов в разделе «Выбрать категорию (США)» из amzscout , визуализируемых по-разному с помощью HtmlUnitDriver и HtmlUnit безголового браузера?

Используя GeckoDriver / Firefox и ChromeDriver / Chrome , я могу создать список и распечатать его следующим образом:

• Пробный код:

  System.setProperty("webdriver.gecko.driver", "C:/Utility/BrowserDrivers/geckodriver.exe");
  WebDriver driver = new FirefoxDriver();
  driver.get("https://amzscout.net/sales-estimator");
  List<WebElement> elements = new WebDriverWait(driver, 10).until(ExpectedConditions.visibilityOfAllElementsLocatedBy(By.cssSelector("span.cat-pick_name-in")));
  for (WebElement ele:elements)
      System.out.println(ele.getAttribute("innerHTML"));
  driver.quit();
  

• Консольный вывод:

  Appliances
  Arts, Crafts & Sewing
  Automotive
  .
  .
  .
  

Но при использовании HtmlUnitDriver и HtmlUnit безголовый браузер кажется, что HTML-код выглядит по-другому следующим образом:

Полный HTML-код находится в pastebin

Соответствующая часть HTML-кода:

<script type="application/ld+json">
  //<![CDATA[

  {
    "@context": "http://schema.org/",
    "@type": "Product",
    "name": "AMZScout Sales Estimator",
    "image": "",
    "brand": "AMZScout",
    "aggregateRating": {
      "@type": "AggregateRating",
      "ratingValue": "4.7",
      "bestRating": "5",
      "worstRating": "1",
      "ratingCount": "231"
    }
  }

  //]]>
</script>
<script type="text/javascript" src="/js/common.js">
</script>
<script type="text/javascript">
  //<![CDATA[

  const DATA = {
      COM: [
        ["Appliances", "s-cat-icon-appliances"],
        ["Arts, Crafts & Sewing", "s-cat-icon-craft"],
        ["Automotive", "s-cat-icon-automotive"],
        ["Baby", "s-cat-icon-baby"],
        ["Beauty & Personal Care", "s-cat-icon-beauty"],
        ["Books", "s-cat-icon-books"],
        ["Camera & Photo", "s-cat-icon-camera"],
        ["Cell Phones & Accessories", "s-cat-icon-phone"],
        ["Clothing, Shoes & Jewelry", "s-cat-icon-clothing"],
        ["Computers & Accessories", "s-cat-icon-computers"],
        ["Electronics", "s-cat-icon-electronics"],
        ["Grocery & Gourmet Food", "s-cat-icon-food"],
        ["Health & Household", "s-cat-icon-health"],
        ["Home and Garden", "s-cat-icon-home"],
        ["Home & Kitchen", "s-cat-icon-kitchen"],
        ["Industrial & Scientific", "s-cat-icon-gear"],
        ["Jewelry", "s-cat-icon-jewelry"],
        ["Kindle Store", "s-cat-icon-kindle"],
        ["Kitchen & Dining", "s-cat-icon-dining"],
        ["Musical Instruments", "s-cat-icon-musical-instruments"],
        ["Office Products", "s-cat-icon-office"],
        ["Patio, Lawn & Garden", "s-cat-icon-lawn"],
        ["Pet Supplies", "s-cat-icon-pet-food"],
        ["Shoes", "s-cat-icon-shoes"],
        ["Software", "s-cat-icon-software"],
        ["Sports & Outdoors", "s-cat-icon-sports"],
        ["Tools & Home Improvement", "s-cat-icon-repairs"],
        ["Toys & Games", "s-cat-icon-toys"],
        ["Watches", "s-cat-icon-watches"],
        ["Video Games", "s-cat-icon-joystick"]
      ],
      CO_UK: [
          ["Baby", "s-cat-icon-baby"],

На который ссылаются в:

$(function () { var rankInput = $('.cat-rank_input'); function toggleRank(e) { var cats = $('.cat-pick'); var rank = $('.cat-rank'); var list = rank.find('.cat-pick_list'); var $el = $(e.currentTarget).clone(); $el.on('click', toggleRank).css('cursor',
'pointer'); list.empty(); list.append($el); category = $el.find('.cat-pick_name-in').text(); rankInput.val(''); cats.toggle(); rank.toggle(); if ($(window).width() >= 768) { var catsHeight = cats.height(); rank.height(catsHeight); } if (rank.is(':visible'))
{ val.text('?'); setTimeout(function () {rankInput.focus()}, 0); } } function selectDomain(d) { const data = DATA[d]; const list = $('.cat-pick .cat-pick_list'); list.empty(); data.filter(function (d) {return d[1] != ''}).forEach(function (d) { var el
= $('
<div class="cat-pick_i"><span class="cat-pick_link"><span class="cat-pick_ico"><span></span></span><span class="cat-pick_name"><span class="cat-pick_name-in"></span></span>
  </span>
</div>'); el.find('.cat-pick_ico span').addClass(d[1]); el.find('.cat-pick_name-in').text(d[0]); el.on('click', toggleRank); list.append(el); }); domain = d; } rankInput.on('change', function () {rank = rankInput.val()}); rankInput.on('keyup', function(e) {e.keyCode
== 13 && (rank = rankInput.val()) && getEstSales()}); $('.cat-rank_another-link').on('click', toggleRank); $('#domain').on('change', function (e) {selectDomain(e.target.value);}); selectDomain(domain); });

Может кто-нибудь помочь мне, пожалуйста?

Answer 1

Как вы уже поняли, элементы, которые вы ищете, созданы javascript. Это означает, что вы должны включить поддержку JavaScript для HtmlUnit.

Второй момент заключается в том, чтобы как-то подождать, пока javascript не будет завершен. Вы используете 'visibilityOfAllElementsLocatedBy' и документация для этого:

Ожидание проверки того, что все элементы, присутствующие на веб-странице, которые соответствуют локатору, видны.

Если нет элементов (или не всех элементов, потому что javascript все еще создает новые), соответствующих вашему селектору, это верно. Из-за этого я немного изменил условие ожидания, чтобы действительно дождаться создания элементов.

Мой окончательный источник выглядит следующим образом и создает именно тот список, который вы ожидаете:

String url = "https://amzscout.net/sales-estimator";                        

// true enables javascript support                                          
WebDriver driver = new HtmlUnitDriver(true);                                
try {                                                                       
    driver.get(url);                                                        

    // wait until the elements are created                                  
    List<WebElement> elements =
            new WebDriverWait(driver, 10)               
                .until(ExpectedConditions                                   
                    .numberOfElementsToBeMoreThan(                          
                            By.cssSelector("span.cat-pick_name-in"), 29));  

    System.out.println();                                                   
    for (WebElement ele : elements) {                                       
        System.out.println(ele.getAttribute("innerHTML"));
    }
} finally {                                                                 
    driver.quit();                                                          
}

Надеюсь, это поможет ....