Тестирование содержимого после CSS-селектора в транспортире - PullRequest
Новая
       53

Тестирование содержимого после CSS-селектора в транспортире

0 голосов
/ 05 февраля 2019

В моем HTML у меня есть элемент, такой как ниже

HTML: 

<hmtl>
    <head>
        <style>
            label::after {
            content: " *"
            }
        </style>
    </head>
    <body>
        <label> I'm mandatory</label>
    </body>
</hmtl>

То, что отображается в браузере: 

I'm mandatory *

Выбор запросов 

>getComputedStyle(document.querySelector('label')).content
<"normal"

Итак, я вижу normal вместо *.

Я не вижу, где находится normal из.Является ли это правильным способом проверки содержимого ::after CSS-селектора?

Я хочу проверить, что после метки есть "*", но не могу получить значение "содержимого"свойство правильно.Как только я смог найти его с помощью браузера DOM API, мне бы хотелось протестировать его в транспортире.

Обновление

Я нашел ответ в - Selenium WebDriver getтекст из CSS-свойства "content" в псевдоэлементе :: before .Теперь остается вопрос, как мне проверить это на транспортире.

Ответы [ 3 ]

0 голосов
/ 06 февраля 2019

Window.getComputedStyle ()

Метод Window.getComputedStyle () возвращает объект, содержащий значения всех свойств CSS элемента, после применения активных таблиц стилей и разрешения любых базовых вычисленийэти значения могут содержать.Доступ к отдельным значениям свойств CSS осуществляется через API-интерфейсы, предоставляемые объектом, или посредством индексации с помощью имен свойств CSS.

  • Синтаксис: 

    var style = window.getComputedStyle(element [, pseudoElt]);

element
    The Element for which to get the computed style.
pseudoElt (Optional)
    A string specifying the pseudo-element to match. Omitted (or null) for real elements.

The returned style is a live CSSStyleDeclaration object, which updates automatically when the element's styles are changed.

  • Связанное обсуждение можно найти в элементе выбора WebDriver, который имеет :: before

Использование с псевдоэлементами

getComputedStyle()может извлекать информацию о стиле из псевдоэлементов (таких как ::after, ::before, ::marker, ::line-marker.

Согласно HTML, <style> выглядит следующим образом: 

<style>
    label::after {
    content: " *"
    }
</style>

Реализуется как: 

<label> I'm mandatory</label>

Для извлечения вам необходимо: 

var label = document.querySelector('label'); 
var result = getComputedStyle(label, ':after').content;

console.log('the generated content is: ', result); // returns ' *'

Ссылка

0 голосов
/ 08 февраля 2019

Поскольку мой вопрос касался конкретно транспортира, я выкладываю решение, которое у меня получилось.Приступая к той части, в которой я застрял изначально - почему вместо «*» 

>getComputedStyle(document.querySelector('label')).content
<"normal"

я получаю «обычный» * Так что раньше я не знал, что :: after создает псевдо-дочерний элементвнутри элемента метки.

Проверка элемента <label> в Chrome показывает приведенный ниже HTML 

<label>
    I'm mandatory
    ::after
</label>

Если щелкнуть элемент <label> и проверить вкладку Computed, я могу увидеть, что значение свойства contentis normal.

Однако, если я нажму на ::after псевдоэлемент, я смогу увидеть на вкладке Computed значение для свойства content: " *".

Asупомянутое в других ответах getComputedStyle() с псевдоэлементом в качестве второго параметра, является единственным способом получить значение свойства CSS для "::after".Суть проблемы в том, что транспортир не имеет эквивалента для getComputedStyle(), поэтому мы должны полагаться на browser.executeScript(), как показано ниже: 

let labelHeader = 'I'm mandatory *';
// Passing label element separately as in the real test case, it would be extracted from parent
// enclosing element and need to be able to pass it as a parameter to browser.executeScript().

let label = element(by.css('label'));
browser.executeScript("return window.getComputedStyle(arguments[0], ':after').content",
                       label)
    .then ((suffixData: string) => {
     // suffixData comes out to be '" *"', double quotes as part of the string.
     // So get rid of the first and last double quote character

         suffixData = suffixData.slice(1, suffixData.length - 1);
         labelText += suffixData;
         expect(labelText).toBe(labelHeader);
     });
0 голосов
/ 06 февраля 2019 

const label = document.querySelector('label'); // "normal";

console.log(label);


const labelAfter = getComputedStyle(label, ':after').content;

console.log(labelAfter == "normal");
label::after {
  content: " *"
}
<label> I'm mandatory</label>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...