Различные способы проверки наложения текста в GUI с помощью транспортира

Question

Я тестирую адаптивную веб-страницу с помощью транспортира с мобильным разрешением 300 * 640 . Я заметил, что значок и часть текста перекрываются, но не могут быть идентифицированы с помощью транспортира.

Я использовал функцию isDisplayed(), и возвращение isDisplayed() равно true в моем коде, как показано ниже:

const get Element= element(by.id('iconId'));
  return getElement.element(by.className('product-png')).isDisplayed().then((isVisible) => {
    return isVisible;
});

ПРИМЕЧАНИЕ: Я хочу знать, как проверить перекрытие текст или значок в транспортире для адаптивной веб-страницы и что все сценарии ios для тестирования любой веб-страницы на мобильном телефоне и планшете.

Answer 1

Лучший способ сделать это - сравнить скриншоты. У вас есть дизайны, созданные для экранов разных размеров, а затем вы делаете снимок экрана в этом размере браузера и сравниваете его со своим дизайном. Это можно сделать лучше с помощью инструментов тестирования пользовательского интерфейса, таких как Applitools и Percy. Посетите этот блог для получения дополнительной информации Percy .

PS Percy платный, но это определенно хороший инструмент для тестирования пользовательского интерфейса.

Другой сложный способ сделать это было бы получить координаты UI элементов, которые вы хотите проверить на перекрытие. Координаты должны быть другими. Если координаты второго элемента находятся где-либо в диапазоне координат начала и конца первого элемента, то есть перекрытие. Но этот метод был бы действительно громоздким, если вы не напишите вспомогательную функцию, которая отображает координаты 4 точек элементов и сравнивает их с 4 точками другого элемента.

Вы можете альтернативно использовать jqueryCollision для проверки. Посмотрите документацию.