ฉันจะทดสอบฟิลด์รูปแบบข้อความ CKEditor 5 ด้วย Behat/Mink ได้อย่างไร

Drupal 10 กำลังเปลี่ยนจาก CKEditor 4 เป็น 5

ดังนั้น ฉันจึงติดตั้งโมดูล CKEditor 5 รุ่นทดลอง และกำลังพยายามอัปเดตการทดสอบ Behat เพื่อใช้ CKEditor 5

ฉันใช้การทดสอบ @javascript ใน Behat บน CircleCI เพื่อตรวจสอบไซต์ Drupal 8 ของฉัน

มาตรฐาน ฉันกรอก "ฟิลด์ของฉัน" ด้วย "ค่า" ขั้นตอนล้มเหลวสำหรับฟิลด์ที่ใช้ CKEditor ตัวอย่างเช่น สำหรับฟิลด์ข้อความยาวที่มีป้ายกำกับ คำถามถ้าฉันเพิ่มขั้นตอน:

และฉันกรอก "คำถาม" ด้วย "จะได้ผลหรือไม่"

จากนั้นฉันได้รับข้อผิดพลาด: องค์ประกอบไม่สามารถโต้ตอบได้

ตามที่อธิบายไว้ในคำถามนี้เกี่ยวกับ CKEditor 4, มี สรุปสาระสำคัญโดย johnennewdeeson ที่ใช้งานได้กับ CKEditor 4 (ซึ่งโดยทั่วไปจะใช้ JS เพื่อค้นหาอินสแตนซ์ตัวแก้ไขและตั้งค่าข้อมูล) แต่ใช้ไม่ได้กับ CKEditor 5 (ไม่ได้กำหนด CKEDITOR ข้อผิดพลาด).

ฉันจะตั้งค่าของฟิลด์รูปแบบข้อความใน Behat โดยใช้ CKEditor 5 ได้อย่างไร

ตามที่อธิบายไว้ใน จะรับวัตถุอินสแตนซ์ตัวแก้ไขจากองค์ประกอบ DOM ได้อย่างไรคุณสามารถค้นหา ck-editor__แก้ไขได้ และใช้เพื่อค้นหาอินสแตนซ์ตัวแก้ไขเฉพาะที่คุณต้องการจัดการ

ต่อไปนี้เป็นตัวอย่างการทำงาน โปรดทราบว่าคุณต้องแทนที่ขีดล่างด้วยยัติภังค์ในชื่อเครื่องสำหรับ $field_hyphenated_machine_name.

  /**
   * ป้อนข้อความโดยใช้ CKEditor
   *
   * @ จากนั้นฉันก็กรอกฟิลด์ wysiwyg :field_hyphenated_machine_name ด้วย :value
   * @ จากนั้นฉันป้อน :value สำหรับฟิลด์ wysiwyg :field_hyphenated_machine_name
   */
  ฟังก์ชันสาธารณะ iFillInWysiwygOnFieldWith($field_hyphenated_machine_name, $value) {
    # https://ckeditor.com/docs/ckeditor5/latest/support/faq.html#how-to-get-the-editor-instance-object-from-the-dom-element
    $ckeditor5_drupal_editable_element = "div.form-item-$field_hyphenated_machine_name-display-0-value .ck-editor__editable";

    $this->getSession()
      ->executeScript(
        "
        const domEditableElement = document.querySelector(\"$ckeditor5_drupal_editable_element\");
        ถ้า (domEditableElement.ckeditorInstance) {
          const editorInstance = domEditableElement.ckeditorInstance;
          ถ้า (ตัวแก้ไขอินสแตนซ์) {
            editorInstance.setData(\"$value\");
          } อื่น {
            โยนข้อยกเว้นใหม่ ('ไม่สามารถรับอินสแตนซ์ตัวแก้ไข!');
          }
        } อื่น {
          โยนข้อยกเว้นใหม่ ('ไม่พบองค์ประกอบ!');
        }
        ");
  }