selenuim操作基于REACT實現的富文本編輯器1

since1986 發布于2019-07-30 17:03 / 1846人閱讀

摘要：中大多數的輸入框都是標簽，但是由于業務中前端有使用到基于實現的富文本編輯器，在實現自動化測試編寫時自然會涉及到對富文本器進行操作處理檢查該編輯器的元素，可以看到和正常的不同，該結構為一個里面裹了個而在其中輸入文字，則是在改變中的如果有換行的

web中大多數的輸入框都是標簽，但是由于業務中前端有使用到基于REACT實現的富文本編輯器，在實現自動化測試編寫時自然會涉及到對富文本器進行操作處理

檢查該編輯器的html元素，可以看到和正常的不同，該結構為一個

里面裹了個

而在其中輸入文字，則是在改變中的text(),如果有換行的話則生成多個

和

接下來涉及到使用 selenium 去操作富文本編輯器，seleuim的基本使用就不在本篇進行說明，首先要定位進行輸入，普通的一般使用.sned_keys方法輕松實現輸入，這里對

使用.sned_keys方法仍然可以生效，不過定位

時根據html結構需要對最外層

進行操作，才可以正常輸入（ps、也可以使用from selenium.webdriver.common.keys import Keys進行鍵盤操作）

第二步，涉及到對輸入的文字進行刪除操作，這一步也是讓我感到非常納悶的地方，正常的自帶有.clear()方法，輕松對文字進行清理，但是在這里，無論我是對

還是還是最外層的

使用clear()方法，在UI界面上能看到文字有被正常清楚，html中的文字也正常被清除，但是一旦的點擊保存或者，繼續用.sned_keys增加文字，剛才clear的內容就會再次出現。

最后和前端小哥哥討論，發現可能是REACT框架導致，該框架采用的是view和model綁定的模型，clear操作僅僅清除了view層的內容，實際數據還是存在，所以不能夠清除，要想同時清除view和model的話還是需要觸發鍵盤事件

知道了大概原因后，代碼就好寫很多了，直接seleuim直接定位到

，然后根據字符串長度調用鍵盤刪除鍵send_keys(Keys.BACK_SPACE)

最后貼上很挫的python代碼

        content_input = dr.find_element_by_xpath("http://div[@role="textbox"]")
        content_input.click()
        for key in change_name:
            content_input.send_keys(Keys.BACK_SPACE)

        content_input.send_keys(change_content)

云服務器 GPU云服務器 react實現輪播圖富文本編輯器 linux文本編輯器富文本web編輯器

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/41986.html

react 搭建博客---支持markdown的富文本編輯器

摘要：最近在學，準備配合搭個博客，找了很多富文本編輯器，都不是很適合用，后來看到一篇搭建博客的文章，里面使用的地址，完全就符合我的想法啊，界面簡潔大方還有預覽功能。最近在學nodejs，準備配合react+mongodb搭個博客，找了很多富文本編輯器，都不是很適合react用，后來看到一篇vue+node搭建博客的文章，里面使用的simplemde(github地址)，完全就符合我的想法啊...

tylin 2019-08-21 11:52 評論0 收藏0
手摸手，帶你用vue擼后臺系列三(實戰篇)

摘要：社區的認可目前已經是相關最多的開源項目了，體現出了社區對其的認可。監聽事件手動維護列表這樣我們就簡單的完成了拖拽排序。完整項目地址：vue-element-admin 系類文章一：手摸手，帶你用vue擼后臺系列一(基礎篇)系類文章二：手摸手，帶你用vue擼后臺系列二(登錄權限篇)系類文章三：手摸手，帶你用vue擼后臺系列三(實戰篇）系類文章四：手摸手，帶你用vue擼后臺系列...

Channe 2019-08-20 17:15 評論0 收藏0
手摸手，帶你用vue擼后臺系列三(實戰篇)

摘要：社區的認可目前已經是相關最多的開源項目了，體現出了社區對其的認可。監聽事件手動維護列表這樣我們就簡單的完成了拖拽排序。完整項目地址：vue-element-admin 系類文章一：手摸手，帶你用vue擼后臺系列一(基礎篇)系類文章二：手摸手，帶你用vue擼后臺系列二(登錄權限篇)系類文章三：手摸手，帶你用vue擼后臺系列三(實戰篇）系類文章四：手摸手，帶你用vue擼后臺系列...

zgbgx 2019-08-29 12:46 評論0 收藏0
一款基于vue好用的富文本編輯器Froala WYSIWYG Editor

摘要：前言基于使用過幾款富文本編輯器趟過坑，但是這幾款總感覺不是那么適合項目需求，苦苦搜尋總算找到一款好用的富文本編輯器支持特性快速預覽使用廢話不多說，開始擼代碼安裝引入引入引入中文語言包引入此處可在中引入地址前言：基于Vue使用過幾款富文本編輯器：wangEditorvue-quill-editorvue2-editor 趟過坑，但是這幾款總感覺不是那么適合項目需求，苦苦搜尋總算找到一...

adam1q84 2019-08-23 12:12 評論0 收藏0
selenuim-下拉框（單選）-python

摘要：一通過定位下拉框先導入的模塊，在使用方法進行操作方法一定位不等于不等于如果選項值不是固定的，直接將固定值替換成變量即可下面是的具體方法通過索引定位通過值定位通過文本值定位取消所有選項取消對應選項取消對應選項取消對應文本選項返回第一個選 showImg(https://segmentfault.com/img/bVbk4IA);一、通過select定位下拉框先導入Select的模塊，在使...

KevinYan 2019-07-30 18:39 評論0 收藏0