Блог

Я использую WebdriverIO6 для создания демонстрации на этом сайте : http://automationpractice.com/index.php .
Я пытаюсь выполнить «простой» сценарий.

 Feature: Dashboard
Test dashboard functionalities

Background: Open dashboard page
Given I visit home page

Scenario: Open Product Detail Page of the last product in the list
When I click on the last product in the list
Then Product Detail Page of the last product opens  
  

Когда я пытаюсь нажать кнопку «Еще» последнего продукта в списке, чтобы открыть страницу сведений о продукте, я получаю element not interactable сообщение об ошибке.
Это то, что я пробовал в методе, который пытается нажать кнопку «Еще»:

 clickLastProductImage(productId: number) {
   browser.waitUntilListIsDisplayed(this.popularProducts, productId, 10000);
   const element = this.popularProductMoreButton(productId);
   console.log("in view port", element.isDisplayedInViewport()); // this results in false
   // element.scrollIntoView();
   element.moveTo();
   console.log("in view port", element.isDisplayedInViewport()); // BUT this also results in false 
   element.waitForDisplayed(); // this throws an error because the element is not displayed; without this 
                               // I get element not interactable error
   element.click();
 }  
  

Это селектор элемента:

 popularProductMoreButton(productId: number): WebdriverIO.Element {
return $('#homefeatured.product_list a.button.lnk_view[href*="id_product='   productId   '"]');
}  
  

Что бы я ни пробовал, это просто не прокручивается до этого элемента.
Проблема в том, что кнопка «Еще» видна только после наведения курсора мыши на изображение продукта?
Вот ссылка на исходный код на github: https://github.com/mareru/webdriverIO-shop-demo
Пожалуйста, помогите!
Спасибо!

Это, наконец, сработало. Мне пришлось сначала прокрутить TypeScript, а затем перейти к элементу, на который нужно было навести курсор (в данном случае это последнее изображение продукта).). После этого мне пришлось нажать кнопку «Еще».
Это код, который работает:
последний выбор изображения продукта:

 productImage(productId: number): WebdriverIO.Element {
return $('#homefeatured.product_list a.product_img_link[href*="id_product='   productId   '"]');
}  
  

Метод:

 clickLastProductImage(productId: number) {
    browser.waitUntilListIsDisplayed(this.popularProducts, productId, 10000);

    const productImage = this.productImage(productId);
    productImage.scrollIntoView();
    productImage.moveTo();

    const element = this.popularProductMoreButton(productId);
    console.log("in view port", element.isDisplayedInViewport());
    element.waitForDisplayed();
    element.click();
}