Как настроить контент внутри ckeditor с помощью фреймворка Atata?

Я пытаюсь установить контент внутри ckeditor, а точнее внутри <body> из <iframe>, но однажды, когда я переключаюсь на фрейм, система выдает: NoSuchElementException. Я пытался найти элемент по классу или селектором CSS - ни один из них не дал результатов.

Я обнаружил, что проблема заключается в настройке содержимого <body> сам и этот пост:

Как получить и установить значение текстового редактора в селене

но я не уверен, как выполнить JavaScript с помощью Atata. Ниже приведены части моего кода.

Страница где <iframe> расположен:

    public class DocumentEditPage : Page<_>
    {
        [FindById("cke_1_contents")]
        //[FindByClass("cke_wysiwyg_frame cke_reset")] 
        //[FindByIndex(0)]
        public Frame<DocumentFramePage, _> ContentSwedish { get; private set; 
    }

Рамка страницы:

    public class DocumentFramePage : Page<_>
    {
        [FindByClass("cke_editable cke_editable_themed cke_contents_ltr cke_show_borders")]
        //[FindByCss("body")]
        public TextInput<_> TextBoxEditingContent { get; private set; }

    }

Тестовое задание:

    [Test]
        public void SaveContentInsideFrame()
        {

            string ID = "7";
            string valueToBeSet = "TestContent";


            Go.To<DocumentsPage>().
               Documents.Rows[x => x.Dokument_ID == ID].Edit().
               // Refresh page so the content can be visible
               RefreshPage().
               ContentSwedish.SwitchTo().
               TextBoxEditingContent.Clear().
               TextBoxEditingContent.Set(valueToBeSet).
               SwitchToRoot<DocumentEditPage>().
               // Click on Save button
               Save();
        }

HTML-код страницы:


<div id="cke_1_contents" class="cke_contents cke_reset" role="presentation" style="height: 200px;">
<span id="cke_52" class="cke_voice_label">Press ALT 0 for help</span>
<iframe src="" style="width: 100%; height: 100%;" class="cke_wysiwyg_frame cke_reset" title="Rich Text Editor, Details_0__Content" aria-describedby="cke_52" tabindex="0" allowtransparency="true" frameborder="0"></iframe></div>

<body class="cke_editable cke_editable_themed cke_contents_ltr cke_show_borders" spellcheck="false" contenteditable="true">
<h1>Test</h1>
<p>Test<br></p>
<p>Test<br></p>
<p><br></p>
</body>
Источник

2 ответа

Решение

Вы можете создать класс управления для CKEditor следующим образом:

[ControlDefinition("iframe", ContainingClass = "cke_wysiwyg_frame", ComponentTypeName = "CKEditor")]
public class CKEditor<TOwner> : EditableField<string, TOwner>
    where TOwner : PageObject<TOwner>
{
    protected override string GetValue()
    {
        string value = null;

        DoWithinFrame(body =>
        {
            value = body.Text;
        });

        return value;
    }

    protected override void SetValue(string value)
    {
        DoWithinFrame(body =>
        {
            body.Clear();
            body.SendKeys(value);
        });
    }

    // An appoach to set a value using JavaScript.
    //protected override void SetValue(string value)
    //{
    //    Driver.ExecuteScript(
    //        "arguments[0].contentDocument.getElementsByClassName('cke_editable_themed')[0].innerHTML = arguments[1];",
    //        Scope, // Actual CKEditor <iframe> element.
    //        value);
    //}

    protected void DoWithinFrame(Action<IWebElement> frameBodyAction)
    {
        var frame = Driver.SwitchTo().Frame(Scope);
        var frameBody = frame.Get(By.TagName("body"));

        frameBodyAction?.Invoke(frameBody);

        Driver.SwitchTo().DefaultContent();
    }
}

Логика iframe выключатели инкапсулируют внутри него.

Затем используйте его в объекте страницы:

public class DocumentEditPage : Page<_>
{
    public CKEditor<_> Editor { get; private set; }
}

И в тесте с ним взаимодействуют как с обычным полем ввода:

Go.To<DocumentEditPage>().
    Editor.Set("sample text").
    Editor.Should.Equal("sample text");

Приведенный выше код работает для CKEditor 4. Протестировано на https://ckeditor.com/ckeditor-4/demo/.

Источник

Чтобы ответить на мой собственный вопрос, внесите изменения в код для тестирования части:

 [Test]
    public void SaveContentInsideFrame()
    {

        string ID = "7";
        string valueToBeSet = "TestContent";

        var body = Go.To<DocumentsPage>().
           Documents.Rows[x => x.Dokument_ID == ID].Edit().
           // Refresh page so the content can be visible
           RefreshPage();
           //Execute script for changing content
           AtataContext.Current.Driver.ExecuteScript("CKEDITOR.instances.Details_0__Content.setData('" + valueToBeSet + "')");              
           body.
           // Click on Save button
           Save();
    }
Источник
Другие вопросы по тегам