Проверка свойства только для чтения для поля ввода с помощью puppeteer

#javascript #puppeteer

Вопрос:

Пожалуйста, считайте меня нубом, так как я все еще учусь на кукольника.

Я пишу тест, чтобы убедиться, что следующее поле ввода имеет свойство только для чтения, чтобы конечные пользователи не могли его изменять.

 <input readonly id="serverUrl" type="text" value="https://mytestservice.com/">

Я пробовал несколько методов для достижения этой цели, но мои методы возвращают либо неопределенные, либо ложные, например

 let inputField = await page.$('#serverUrl')
const is_readonly = await (await inputField.getProperty("readonly")).jsonValue();

Вышеуказанные возвраты undefined .

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

 const is_readonly = await page.$('#serverUrl[readonly]') !== null;

Это привело false к появлению вышеупомянутого поля ввода.

Затем я запустил тот же метод в другом поле, у которого нет свойства только для чтения, результат для этого поля также был ложным.

 is_readyonly value is : false

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

1. Ваши const is_readonly = await page.$('#serverUrl[readonly]') !== null; работы для меня на try-puppeteer.appspot.com , загрузка output.jsbin.com/bahaxinebu . Я true согласен с показанным вами HTML-кодом. Если я изменю его так, чтобы искать атрибут, которого, как я знаю, там нет, я получу false . Так что, похоже, это работает. Возможно, у вас есть более одного элемента с id="serverUrl" ? $ нашел бы только первого.

2. @Ти Джей Краудер, это сработало. Спасибо, что указали на возможную проблему. Это, безусловно, был случай дублирования id="serverUrl" в DOM.

3. Дело в том, const is_readonly = await page.$('#serverUrl[readonly]') !== null; что должно работать, даже если на странице более одного id="serverUrl" элемента, при условии, что хотя бы у одного из них есть readonly атрибут. Так что я не понимаю, почему это не сработало. (Это объяснило бы, почему ваша версия с getProperty не работала, но не почему эта версия не работала.)

Ответ №1:

Ваша проблема в том, что свойство указано как readOnly вместо readonly . Из спецификации:

Атрибут IDL только для чтения должен отражать атрибут содержимого только для чтения

Поэтому вам нужно писать это с большой буквы.:

 const is_readonly = await (await inputField.getProperty("readOnly")).jsonValue();

1. Это не объясняет, почему const is_readonly = await page.$('#serverUrl[readonly]') !== null; тоже не сработало. (Это действительно работает для меня с HTML, который показывает операция.)

2. @Gh05d также ваше предлагаемое решение с капиталом O в readOnly собственности также работает нормально. Спасибо за вашу помощь. const is_readonly = await (await inputField.getProperty("readOnly")).jsonValue();