Эмуляция в браузере для js текстового редактора - ckeditor

Тестирование сайтов эмуляцией посещений пользователей
Ответить
msalimov
Сообщения: 3
Зарегистрирован: 15 июн 2020, 21:19

Эмуляция в браузере для js текстового редактора - ckeditor

Сообщение msalimov » 19 июн 2020, 09:36

Добрый день!
Прошу помочь разобраться, как автоматизировать работу в браузерном js текстовом редакторе - как я понимаю, используется ckeditor.
Не могу никак получить какой-то работающий кусок скрипта, чтобы за него зацепиться.
Вот код, который сохраняет
$browser->save_page_as($file_path);
см ===cut here===
код не весь, т.к. по объему превосходит лимит сообщения форума

Что нужно: нужно внутри документа, который загружен в этот редактор, найти определенный раздел и вставить в него текст из внешнего списка (скажем, я могу его засунуть в php-шный массив).
Пробовал вызовы типа get_inner_text_by_attribute, get_inner_text_by_id - они все ничего не возвращают, на находят почему то элементы.

Пробовал записывать действия - получается ерунда.
Пробовал эмуляцию клавиатуры - не помогает. Даже не получается вызвать хотя бы браузерное окно поиска по Ctrl+F.

Буду благодарен за любую помощь. Если же кто-то еще сможет помочь довести операцию до ума, можно договориться об оплате консультации.

Спасибо

===cut here===
<!DOCTYPE html><html lang="ru" style="height: auto;"><head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="x-ua-compatible" content="ie=edge">

<!-- CSRF Token -->
<meta name="csrf-token" content="bxll73K5UW66vNYovX7BmI106RnyTYL5Xtz7uh0K">

<meta name="api-token" content="7gg6o13jFcgyeC2qYPFRIW1udetJsEV2VTOeivL2MRNj4GW8xXgm1VxL40kE">

<title>Разметка книги - Sri Caitanya-caritamṛta. Adi-lila</title>

<link href="/admin/css/app.css?id=3a40479b7f3ead5ecf4d" rel="stylesheet">

<!-- Google Font: Source Sans Pro -->
<link href="https://fonts.googleapis.com/css?family ... 0,400i,700" rel="stylesheet">
<style>.cke{visibility:hidden;}</style><script type="text/javascript" src="http://in.vedarama.ru/admin/ckeditor/co ... ript><link rel="stylesheet" type="text/css" href="http://in.vedarama.ru/admin/ckeditor/sk ... 0"><script type="text/javascript" src="http://in.vedarama.ru/admin/ckeditor/la ... pt><script type="text/javascript" src="http://in.vedarama.ru/admin/ckeditor/st ... pt><script type="text/javascript" src="http://in.vedarama.ru/admin/ckeditor/pl ... pt><script type="text/javascript" src="http://in.vedarama.ru/admin/ckeditor/pl ... pt><script type="text/javascript" src="http://in.vedarama.ru/admin/ckeditor/pl ... pt><script type="text/javascript" src="http://in.vedarama.ru/admin/ckeditor/pl ... pt><script type="text/javascript" src="http://in.vedarama.ru/admin/ckeditor/pl ... pt><script type="text/javascript" src="http://in.vedarama.ru/admin/ckeditor/pl ... pt><script type="text/javascript" src="http://in.vedarama.ru/admin/ckeditor/pl ... pt><script type="text/javascript" src="http://in.vedarama.ru/admin/ckeditor/pl ... pt><script type="text/javascript" src="http://in.vedarama.ru/admin/ckeditor/pl ... pt><script type="text/javascript" src="http://in.vedarama.ru/admin/ckeditor/pl ... pt><script type="text/javascript" src="http://in.vedarama.ru/admin/ckeditor/pl ... pt><script type="text/javascript" src="http://in.vedarama.ru/admin/ckeditor/pl ... ript><link rel="stylesheet" type="text/css" href="http://in.vedarama.ru/admin/ckeditor/pl ... css"><link rel="stylesheet" type="text/css" href="http://in.vedarama.ru/admin/ckeditor/pl ... ss"><style id="cke_ui_color" type="text/css"></style><style type="text/css" id="treeview-style"> .treeview .list-group-item{cursor:pointer}.treeview span.indent{margin-left:10px;margin-right:10px}.treeview span.icon{width:12px;margin-right:5px}.treeview .node-disabled{color:silver;cursor:not-allowed}.node-treeview{border:none;}.node-treeview:not(.node-disabled):hover{background-color:#F5F5F5;} </style><script type="text/javascript" src="http://in.vedarama.ru/admin/ckeditor/pl ... ript><link rel="stylesheet" type="text/css" href="http://in.vedarama.ru/admin/ckeditor/sk ... 10"></head>
<body id="body" class="sidebar-mini layout-navbar-fixed layout-fixed null" style="min-height: 479px; overflow: hidden; height: auto;">
<script type="text/javascript">
// восстанавливаем статус боковой панели
document.getElementById('body').classList.add(localStorage.getItem('remember.lte.pushmenu'));
</script>
<div class="wrapper">

<!-- Navbar -->
<nav class="main-header navbar navbar-expand navbar-white navbar-light">
<!-- Left navbar links -->
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" data-widget="pushmenu" href="#" data-enable-remember="true"><i class="fas fa-bars"></i></a>
</li>



</ul>
<div class="top-breadcrumb ml-auto">
<ol class="breadcrumb float-sm-right">

<li class="breadcrumb-item"><i class="fas fa-home"></i> <a href="http://in.vedarama.ru">Главная</a></li>


<li class="breadcrumb-item"><a href="http://in.vedarama.ru/library/books">Книги</a></li>


<li class="breadcrumb-item"><a href="http://in.vedarama.ru/library/books/cc-adi/edit">ЧЧ. Ади-лила</a></li>


<li class="breadcrumb-item active">Разметка книги [en]</li>

</ol>

</div>
<!-- Right navbar links -->
<ul class="navbar-nav ml-auto">
<!-- Messages Dropdown Menu -->
<li class="nav-item dropdown">
<a class="nav-link" data-toggle="dropdown" href="#">
<i class="far fa-comments"></i>
<span class="badge badge-danger navbar-badge">2</span>
</a>
<div class="dropdown-menu dropdown-menu-lg dropdown-menu-right">
<a href="#" class="dropdown-item">
<!-- Message Start -->
<div class="media">
<img src="/admin/dist/img/user1-128x128.jpg" alt="User Avatar" class="img-size-50 mr-3 img-circle">
<div class="media-body">
<h3 class="dropdown-item-title">
Brad Diesel
<span class="float-right text-sm text-danger"><i class="fas fa-star"></i></span>
</h3>
<p class="text-sm">Call me whenever you can...</p>
<p class="text-sm text-muted"><i class="far fa-clock mr-1"></i> 4 Hours Ago</p>
</div>
</div>
<!-- Message End -->
</a>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item">
<!-- Message Start -->
<div class="media">
<img src="/admin/dist/img/user8-128x128.jpg" alt="User Avatar" class="img-size-50 img-circle mr-3">
<div class="media-body">
<h3 class="dropdown-item-title">
John Pierce
<span class="float-right text-sm text-muted"><i class="fas fa-star"></i></span>
</h3>
<p class="text-sm">I got your message bro</p>
<p class="text-sm text-muted"><i class="far fa-clock mr-1"></i> 4 Hours Ago</p>
</div>
</div>
<!-- Message End -->
</a>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item dropdown-footer">See All Messages</a>
</div>
</li>
<!-- Notifications Dropdown Menu -->
<li class="nav-item dropdown">
<a class="nav-link" data-toggle="dropdown" href="#">
<i class="far fa-bell"></i>
<span class="badge badge-warning navbar-badge">15</span>
</a>
<div class="dropdown-menu dropdown-menu-lg dropdown-menu-right">
<span class="dropdown-header">15 Notifications</span>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item">
<i class="fas fa-envelope mr-2"></i> 4 new messages
<span class="float-right text-muted text-sm">3 mins</span>
</a>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item">
<i class="fas fa-users mr-2"></i> 8 friend requests
<span class="float-right text-muted text-sm">12 hours</span>
</a>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item">
<i class="fas fa-file mr-2"></i> 3 new reports
<span class="float-right text-muted text-sm">2 days</span>
</a>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item dropdown-footer">See All Notifications</a>
</div>
</li>

<li class="nav-item dropdown user-menu">
<a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">
<img src="https://www.gravatar.com/avatar/f644967 ... &amp;s=256" class="user-image img-circle elevation-2" alt="User Image">
<span class="d-none d-md-inline">Марат Салимов</span>
</a>
<ul class="dropdown-menu dropdown-menu-lg dropdown-menu-right">
<!-- User image -->
<li class="user-header bg-secondary">
<img src="https://www.gravatar.com/avatar/f644967 ... &amp;s=256" class="img-circle elevation-2" alt="User Image">

<p>
Марат Салимов

</p>
</li>

<!-- Menu Footer-->
<li class="user-footer">
<a href="http://in.vedarama.ru/user/profile" class="btn btn-default btn-flat"> Профиль</a>
<a href="http://in.vedarama.ru/logout" onclick="event.preventDefault(); document.getElementById('logout-form').submit();" class="btn btn-default btn-flat float-right">Выйти</a>
<form id="logout-form" action="http://in.vedarama.ru/logout" method="POST" style="display: none;">
<input type="hidden" name="_token" value="bxll73K5UW66vNYovX7BmI106RnyTYL5Xtz7uh0K"> </form>
</li>
</ul>
</li>

</ul>
</nav>
<!-- /.navbar -->

<!-- Main Sidebar Container -->
<aside class="main-sidebar sidebar-light-secondary elevation-1">
<!-- Brand Logo -->
<a href="http://in.vedarama.ru" class="brand-link pl-3">

<span class="brand-text-mini font-weight-bold ml-2">VR</span>
<span class="brand-text font-weight-bold ">VEDARAMA</span>
</a>

<!-- Sidebar -->
<div class="sidebar">

<!-- Sidebar Menu -->
<nav class="mt-2">

<ul data-widget="treeview" role="menu" data-accordion="false" class="nav nav-pills nav-sidebar flex-column js-nav-sidebar-menu"><li class="nav-item"><a href="http://in.vedarama.ru" class="nav-link"><i class="nav-icon fas fa-tachometer-alt"></i><p>Dashboard</p></a></li><li class="has-treeview nav-item menu-open"><a href="#" class="nav-link active"><i class="nav-icon fas fa-book"></i><p>Библиотека<i class="right fas fa-angle-left"></i></p></a><ul class="nav nav-treeview"><li class="active nav-item"><a href="http://in.vedarama.ru/library/books" class="nav-link active"><i class="nav-icon fas fa-atlas"></i><p>Книги</p></a></li><li class="nav-item"><a href="http://in.vedarama.ru/library/categories?language=ru" class="nav-link"><i class="nav-icon fas fa-puzzle-piece"></i><p>Категории</p></a></li><li class="nav-item"><a href="http://in.vedarama.ru/library/persons" class="nav-link"><i class="nav-icon far fa-id-badge"></i><p>Персоны</p></a></li><li class="nav-item"><a href="http://in.vedarama.ru/library/publishers" class="nav-link"><i class="nav-icon far fa-building"></i><p>Издательства</p></a></li><li class="nav-item"><a href="http://in.vedarama.ru/library/archi-books" class="nav-link"><i class="nav-icon fab fa-buysellads"></i><p>Архикниги</p></a></li></ul></li><li class="has-treeview nav-item"><a href="#" class="nav-link"><i class="nav-icon fas fa-tools"></i><p>Настройки<i class="right fas fa-angle-left"></i></p></a><ul class="nav nav-treeview"><li class="nav-item"><a href="http://in.vedarama.ru/settings/library/book-status" class="nav-link"><i class="nav-icon fas fa-boxes"></i><p>Статусы книг</p></a></li></ul></li></ul>



</nav>
<!-- /.sidebar-menu -->
</div>
<!-- /.sidebar -->
</aside>

<!-- Content Wrapper. Contains page content -->
<div class="content-wrapper">


<!-- Main content -->
<section class="content
p-0
">
<div class="container-fluid p-0">
<div class="row no-gutters">

<div class="col-2 border-right">
<div class="card rounded-0 border-0 h-100 sections-block js-sections-block ">
<div class="card-header p-0 pl-1 font-weight-bold d-flex flex-wrap bg-white p-2 book-translation-title" style="height:200px;">
<a href="//vedarama.ru/en/categories/sp-cc/cc-adi" target="_blank" title="Предпросмотр в публичной части">Sri Caitanya-caritamṛta. Adi-lila</a>
</div>
<div class="card-body p-0 js-sections">
<div id="treeview" class="treeview" style="height: 279px;"><ul class="list-group"><li class="list-group-item node-treeview" data-nodeid="0" style="color:undefined;background-color:undefined;"><span class="icon expand-icon fa fa-plus"></span><span class="icon node-icon"></span><a href="#section-1" style="color:inherit;">Introduction</a></li><li class="list-group-item node-treeview" data-nodeid="5" style="color:undefined;background-color:undefined;"><span class="icon expand-icon fa fa-plus"></span><span class="icon node-icon"></span><a href="#section-6" style="color:inherit;">Chapter 1</a></li><li class="list-group-item node-treeview" data-nodeid="110" style="color:undefined;background-color:undefined;"><span class="icon expand-icon fa fa-plus"></span><span class="icon node-icon"></span><a href="#section-111" style="color:inherit;">Chapter 2</a></li><li class="list-group-item node-treeview" data-nodeid="232" style="color:undefined;background-color:undefined;"><span class="icon expand-icon fa fa-plus"></span><span class="icon node-icon"></span><a href="#section-233" style="color:inherit;">Chapter 3</a></li><li class="list-group-item node-treeview node-selected" data-nodeid="347" style="color:#FFFFFF;background-color:#62666b;"><span class="icon expand-icon fa fa-plus"></span><span class="icon node-icon"></span><a href="#section-348" style="color:inherit;">Chapter 4</a></li><li class="list-group-item node-treeview" data-nodeid="612" style="color:undefined;background-color:undefined;"><span class="icon expand-icon fa fa-plus"></span><span class="icon node-icon"></span><a href="#section-613" style="color:inherit;">Chapter 5</a></li><li class="list-group-item node-treeview" data-nodeid="845" style="color:undefined;background-color:undefined;"><span class="icon expand-icon fa fa-plus"></span><span class="icon node-icon"></span><a href="#section-846"
....

===cut here===

Аватара пользователя
XwebDeveloper
Сообщения: 51
Зарегистрирован: 13 ноя 2017, 12:53

Re: Эмуляция в браузере для js текстового редактора - ckeditor

Сообщение XwebDeveloper » 19 июн 2020, 16:31

Ваш html код к сожалению не содержит самого редактора.

Я нашёл похожий редактор тут https://daruse.ru/ckeditor и для него накидал несколько примеров:

Вариант 1 вставка текста в редактор, через определение дочерних элементов в нём. В моём редакторе текст был в виде тэгов p, поэтому мы получаем через кусок этого текста dominterface этого p и вставляем перед ним текст через буфер и ctrl+v.
// тексь для примера
$text ="<p>В интернете присутствует полно разных визуальных редакторов для сайта, но не все они удобно и корректно работают.</p>
<p>Предлагаю рассмотрим лучший в своём роде - CKEditor, который уже давно является популярным и используется на многих сайтах.</p>
<p>Опробуйте редактор в режиме онлайн и вы поймёте, что он действительно удобен.</p>";

$browser->navigate("https://daruse.ru/ckeditor");

sleep(3);

// вставляемый текст
$text1 ="\nВставляемый текст\n";

// получаем номер фрейма с редактором по имеющемуся в нём тексту
// $frame_num = get_frame_number_by_text($body, "Тестовый текст визуального редактора");
// получаем номер фрейма с редактором по его классу
$frame_num = get_frame_number_by_attribute($body, "class","cke_editable cke_editable_themed");
// получение dominterface на тело редактора
$bd = $body->get_by_number(0, $frame_num);
// устанавливаем фокус
$bd->focus();
// задаём текст в редаткоре для теста
$bd->set_inner_html($text);
// пауза
sleep(1);

// получаем дочерний p 
$pp = $bd->get_child_by_inner_text("Опробуйте редактор",false,true); 
// задаём на него фокус для установления перед ним каретки
//$pp->mouse_move(1,1);
sleep(1);
// пауза
$pp->focus();  
sleep(1);
$pp->event("onclick");
//$pp->event("onmouseclick");

sleep(1);
// помещаем его в буффер
$clipboard->put_text($text1);
// вставляем текст с помощью комбинации Ctrl+V
$keyboard->send_key(86, false,true);


// получить номер фрейма по тексту в нём
function get_frame_number_by_text($tag, $text)
{
    for($i=0;$i<15;$i++)
    if($tag->is_exist_by_inner_text($text, false, $i))
      return $i;

 return -1;
}

// получить номер фрейма по тексту в нём
function get_frame_number_by_attribute($tag, $atr_name,$atr_value,$exactly=false)
{
    for($i=0;$i<15;$i++)
    if($tag->is_exist_by_attribute($atr_name,$atr_value,$exactly,$i))
      return $i;

 return -1;
}

Вариант 2 Получаем HTML текст из редактора и заменяем в нём кусок на вставку и вставляем изменённый текст обратно.Это более надёжный вариант, так как ту не используется буфер и передачи фокуса с установлением каретки в нужно место, а просто идёт подмена текста. Единственное надо удостоверится, что такая подмена пройдёт и изменения текста сохранятся при нажатии кнопки Сохранить.

// текст для примера
$text ="<p>В интернете присутствует полно разных визуальных редакторов для сайта, но не все они удобно и корректно работают.</p>
<p>Предлагаю рассмотрим лучший в своём роде - CKEditor, который уже давно является популярным и используется на многих сайтах.</p>
<p>Опробуйте редактор в режиме онлайн и вы поймёте, что он действительно удобен.</p>";

$browser->navigate("https://daruse.ru/ckeditor");

sleep(3);

$text1 ="<p>Вставляемый текст</p>";

// получаем номер фрейма с редактором по имеющемуся в нём тексту
// $frame_num = get_frame_number_by_text($body, "Тестовый текст визуального редактора");
// получаем номер фрейма с редактором по его классу
$frame_num = get_frame_number_by_attribute($body, "class","cke_editable cke_editable_themed");
// получение dominterface на тело редактора
$bd = $body->get_by_number(0, $frame_num);
// устанавливаем фокус
$bd->focus();
$bd->set_inner_html($text);
sleep(1);
// задаём текст в редакторе для теста
$text = $bd->get_inner_html($text);
// заменяем на нужный кусок
$text = str_replace("<p>Опробуйте редактор в режиме","$text1<p>Опробуйте редактор в режиме",$text);

$bd->set_inner_html($text);

// получить номер фрейма по тексту в нём
function get_frame_number_by_text($tag, $text)
{
    for($i=0;$i<15;$i++)
    if($tag->is_exist_by_inner_text($text, false, $i))
      return $i;

 return -1;
}

// получить номер фрейма по тексту в нём
function get_frame_number_by_attribute($tag, $atr_name,$atr_value,$exactly=false)
{
    for($i=0;$i<15;$i++)
    if($tag->is_exist_by_attribute($atr_name,$atr_value,$exactly,$i))
      return $i;

 return -1;
}
Можно ещё сделать через определение подобных изображений если текст перед которым нам надо сделать вставку один и тот же.
Тогда делаем скриншот с текстом, определяем координаты и кликаем по этим координатам что бы установить каретку в нужное место, после чего вставляем текст из буфера.

Также надо учитывать тот момент что если мы работаем через вставку из буффера, то пользоваться компьютером не получится, по крайней мере что либо копировать в буфер, иначе это может привести к сбою в работе скрипта.
Запрос на создание скриптов viewforum.php?f=61

msalimov
Сообщения: 3
Зарегистрирован: 15 июн 2020, 21:19

Re: Эмуляция в браузере для js текстового редактора - ckeditor

Сообщение msalimov » 20 июн 2020, 11:05

Добрый день!

Спасибо огромное Вам за обратную связь!

Попробовал Ваши скрипты - "в-тупую" не работают.
Хотел договориться с Вами о сеансе общения - если это возможно, конечно же. У меня есть TeamViewer или AnyDesk.
Номер телефона скинул в личку. Дайте обратную связь по WA, если Вам это интересно.

Спасибо

Ответить