Splinter入門（八） Interacting with elements 元素互動（三）
Type() 方法
前面說到，可以使用
fill()
填充文本框，但是無法檢測
JavaScript
事件，而
Type()
可以實作。
browser.type('type', 'typing text')
用于給
name
為
type
的文本框填充
typing text
文本。這和
fill()
是一樣的。如果給type傳遞一個參數
slowly=True
，則可以監聽每個字元輸入，例如：
for key in browser.type('type', 'typing slowly', slowly=True):
pass # make some assertion here with the key object :)
此外還可以：
browser.find_by_name('name').type('Steve Jobs', slowly=True)
browser.find_by_css('.city').fill('San Francisco')
元素是否可見（visible or invisible）
browser.find_by_css('h1').first.visible # 可見傳回ture
browser.find_by_css('h1').first.invisible # 不可見傳回true
元素是否含有某class屬性
ElementList對象
通過
Find_*
函數傳回的是一個list（ElementList對象），裡面可能有多個html的元素，如果需要對第一個元素操作，可以類似：
Splinter
中可以允許任何
Element
的方法用在
ElementList
上，這樣預設會将使用
ElementList
的第一個
Element
。即以下兩行是等價的：
browser.find_by_css('a.banner').first.visible
browser.find_by_css('a.banner').visible
示例
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表單應用</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
</head>
<style>
.h1{
color: brown;
}
.content{
color: burlywood;
}
</style>
<script>
function myFunction(){
// alert('輸入框更新啦~',1)
}
</script>
<body>
<h1 class="h1">表單應用</h1>
<h1 class="h1" hidden="True">隐藏的表單應用</h1>
<div>
<form>
name：<input id = "nameId1" type="text" name="firstname" onchange="myFunction()"><br>
name：<input id = "nameId2" type="text" name="secondname" class="content"><br>
Sex：<input id="sexId" type="radio" name="sex" value="male">male <input id="sexId" type="radio" name="sex" value="female">female<br>
Vehicle：<input id="vehicleId" type="checkbox" name="vehicle" value="Bike">I have a bike<br>
file: <input type="file" id="inName" name = 'file' mutiple="multiple">
</form>
</div>
</body>
</html>
python腳本
#!/usr/bin/env python
# -*- coding: utf-8 -*-
# @Author : cuntou0906
# @File : 03.py
# @Time : 2021/7/12 22:38
from splinter import Browser
from time import sleep
browser = Browser('chrome') # 建立浏覽器執行個體
browser.visit('file:///E:/My_code/Python_code/PythonWebCode/SplinterCode/05_Type/html/index2.html') # 通路baidu
browser.type('firstname', 'typing text')
sleep(1)
print("type：：")
for key in browser.type('firstname', 'typing slowly', slowly=True):
print(key)
pass # make some assertion here with the key object :)
sleep(1)
browser.find_by_name('secondname').fill('San Francisco')
sleep(1)
print("visible測試：：")
print("第一個h1是否可見：",browser.find_by_css('h1').first.visible)
print("第2個h1是否可見：",browser.find_by_css('h1')[1].visible)
sleep(1)
print("has_class測試：：")
print(browser.find_by_css('.content').first.has_class('content'))
print(browser.find_by_css('.content').first.has_class('h1'))
print("擷取ElementsList裡的第一個元素進行操作：")
print(browser.find_by_css('.h1').first.visible)
print("直接對ElementsList進行操作：")
print(browser.find_by_css('.h1').visible)
browser.quit() # 關閉浏覽器
運作結果
type：：
t
y
p
i
n
g
s
l
o
w
l
y
visible測試：：
第一個h1是否可見： True
第2個h1是否可見： False
has_class測試：：
True
False
擷取ElementsList裡的第一個元素進行操作：
True
直接對ElementsList進行操作：
True
![TestLink導出用例轉換工具(XML2Excel)[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)