การทดสอบ Web Component: Unit Testing เปรียบเทียบกับ Component Isolation

Web component ได้ปฏิวัติการพัฒนาส่วนหน้าของเว็บไซต์โดยการนำเสนอวิธีที่เป็นมาตรฐานในการสร้างองค์ประกอบ UI ที่สามารถนำกลับมาใช้ใหม่และห่อหุ้ม (encapsulated) ได้ เมื่อ Web component กลายเป็นส่วนสำคัญในเว็บแอปพลิเคชันสมัยใหม่ การรับประกันคุณภาพผ่านการทดสอบอย่างเข้มงวดจึงเป็นสิ่งสำคัญยิ่ง บทความนี้จะสำรวจกลยุทธ์การทดสอบที่สำคัญสองประการสำหรับ Web component: Unit testing และ Component isolation โดยจะตรวจสอบจุดแข็ง จุดอ่อน และวิธีผสานรวมเข้ากับขั้นตอนการพัฒนาของคุณอย่างมีประสิทธิภาพ

ทำไมต้องทดสอบ Web Component?

ก่อนที่จะลงลึกในเทคนิคการทดสอบเฉพาะทาง สิ่งสำคัญคือต้องเข้าใจว่าทำไมการทดสอบ Web component จึงจำเป็น:

• ความน่าเชื่อถือ (Reliability): การทดสอบช่วยให้แน่ใจว่า Web component ของคุณทำงานตามที่คาดหวังในเบราว์เซอร์และสภาพแวดล้อมต่างๆ ซึ่งช่วยลดพฤติกรรมที่ไม่คาดคิดและข้อบกพร่องต่างๆ
• การบำรุงรักษาง่าย (Maintainability): คอมโพเนนต์ที่ผ่านการทดสอบอย่างดีจะง่ายต่อการบำรุงรักษาและปรับโครงสร้าง (refactor) ซึ่งช่วยลดความเสี่ยงในการเกิดข้อผิดพลาดถดถอย (regression) เมื่อมีการเปลี่ยนแปลง
• การนำกลับมาใช้ใหม่ (Reusability): การทดสอบอย่างละเอียดช่วยยืนยันว่าคอมโพเนนต์ของคุณสามารถนำกลับมาใช้ใหม่ได้อย่างแท้จริง และสามารถนำไปรวมเข้ากับส่วนต่างๆ ของแอปพลิเคชันของคุณ หรือแม้กระทั่งในหลายๆ โปรเจกต์ได้อย่างมั่นใจ
• ลดต้นทุนการพัฒนา (Reduced Development Costs): การตรวจพบข้อบกพร่องตั้งแต่เนิ่นๆ ในกระบวนการพัฒนาผ่านการทดสอบนั้นมีค่าใช้จ่ายน้อยกว่าการแก้ไขในภายหลังเมื่อขึ้นระบบใช้งานจริง (production) อย่างมีนัยสำคัญ
• ประสบการณ์ผู้ใช้ที่ดีขึ้น (Improved User Experience): การรับประกันความเสถียรและการทำงานของ Web component ของคุณจะช่วยสร้างประสบการณ์ผู้ใช้ที่ราบรื่นและน่าพึงพอใจยิ่งขึ้น

การทำ Unit Testing กับ Web Component

Unit testing มุ่งเน้นไปที่การทดสอบโค้ดแต่ละหน่วยแยกกัน ในบริบทของ Web component โดยทั่วไปแล้ว "หน่วย" หมายถึงเมธอดหรือฟังก์ชันเฉพาะภายในคลาสของคอมโพเนนต์ เป้าหมายของ Unit testing คือการตรวจสอบว่าแต่ละหน่วยทำงานตามที่ตั้งใจไว้อย่างถูกต้อง โดยไม่ขึ้นอยู่กับส่วนอื่นๆ ของคอมโพเนนต์หรือแอปพลิเคชัน

ข้อดีของการทำ Unit Testing กับ Web Component

• การทดสอบแบบละเอียด (Granular Testing): Unit test ช่วยให้สามารถควบคุมกระบวนการทดสอบได้อย่างละเอียด ทำให้คุณสามารถแยกและทดสอบฟังก์ชันการทำงานเฉพาะส่วนของคอมโพเนนต์ได้
• การทำงานที่รวดเร็ว (Fast Execution): โดยทั่วไปแล้ว Unit test จะทำงานได้รวดเร็วมาก ทำให้ได้รับผลตอบกลับอย่างรวดเร็วในระหว่างการพัฒนา
• การดีบักที่ง่าย (Easy Debugging): เมื่อ Unit test ล้มเหลว โดยปกติแล้วจะสามารถระบุแหล่งที่มาของปัญหาได้อย่างตรงไปตรงมา เนื่องจากคุณกำลังทดสอบโค้ดเพียงส่วนเล็กๆ ที่แยกออกมา
• ความครอบคลุมของโค้ด (Code Coverage): Unit testing สามารถช่วยให้คุณบรรลุความครอบคลุมของโค้ดในระดับสูง ทำให้มั่นใจได้ว่าโค้ดส่วนใหญ่ของคอมโพเนนต์ของคุณได้รับการทดสอบแล้ว

ความท้าทายของการทำ Unit Testing กับ Web Component

• ความซับซ้อนกับ Shadow DOM: การโต้ตอบกับ Shadow DOM ใน Unit test อาจเป็นเรื่องท้าทาย เนื่องจากมันห่อหุ้มโครงสร้างภายในและสไตล์ของคอมโพเนนต์ไว้
• การจำลอง Dependencies: คุณอาจต้องจำลอง (mock) dependencies เพื่อแยกหน่วยที่กำลังทดสอบ ซึ่งอาจเพิ่มความซับซ้อนให้กับการทดสอบของคุณ
• การมุ่งเน้นที่รายละเอียดการนำไปใช้ (Implementation Details): Unit test ที่เฉพาะเจาะจงเกินไปอาจเปราะบางและพังได้เมื่อคุณปรับโครงสร้างการทำงานภายในของคอมโพเนนต์

เครื่องมือและเฟรมเวิร์กสำหรับการทำ Unit Testing กับ Web Component

มีเฟรมเวิร์กการทดสอบ JavaScript ยอดนิยมหลายตัวที่สามารถใช้สำหรับ Unit testing ของ Web component:

• Jest: เฟรมเวิร์กการทดสอบที่ใช้กันอย่างแพร่หลายซึ่งพัฒนาโดย Facebook มีชื่อเสียงในด้านความเรียบง่าย ความเร็ว และความสามารถในการจำลอง (mocking) ในตัว
• Mocha: เฟรมเวิร์กการทดสอบที่ยืดหยุ่นซึ่งช่วยให้คุณสามารถเลือกไลบรารีการยืนยันผล (assertion library) ของคุณเองได้ (เช่น Chai, Assert) และไลบรารีการจำลอง (เช่น Sinon)
• Jasmine: เฟรมเวิร์กการทดสอบยอดนิยมอีกตัวที่มีไวยากรณ์ที่สะอาดและง่ายต่อการเรียนรู้

ตัวอย่างการทำ Unit Testing กับ Web Component ด้วย Jest

ลองพิจารณา Web component ง่ายๆ ที่เรียกว่า <my-counter> ซึ่งแสดงตัวนับและอนุญาตให้ผู้ใช้เพิ่มค่าได้

my-counter.js

class MyCounter extends HTMLElement {
  constructor() {
    super();
    this.shadow = this.attachShadow({ mode: 'open' });
    this._count = 0;
    this.render();
  }

  increment() {
    this._count++;
    this.render();
  }

  render() {
    this.shadow.innerHTML = `
      <p>Count: ${this._count}</p>
      <button id="incrementBtn">Increment</button>
    `;

    this.shadow.getElementById('incrementBtn').addEventListener('click', () => this.increment());
  }
}

customElements.define('my-counter', MyCounter);

my-counter.test.js (Jest)

import './my-counter.js';

describe('MyCounter', () => {
  let element;

  beforeEach(() => {
    element = document.createElement('my-counter');
    document.body.appendChild(element);
  });

  afterEach(() => {
    document.body.removeChild(element);
  });

  it('should increment the count when the button is clicked', () => {
    const incrementBtn = element.shadowRoot.getElementById('incrementBtn');
    incrementBtn.click();
    expect(element.shadowRoot.querySelector('p').textContent).toBe('Count: 1');
  });

  it('should initialize the count to 0', () => {
    expect(element.shadowRoot.querySelector('p').textContent).toBe('Count: 0');
  });
});

ตัวอย่างนี้แสดงให้เห็นถึงวิธีการใช้ Jest เพื่อทดสอบเมธอด increment และค่าเริ่มต้นของตัวนับของคอมโพเนนต์ <my-counter> โดยเน้นการเข้าถึงองค์ประกอบภายใน Shadow DOM โดยใช้ `shadowRoot`

การทดสอบแบบแยกคอมโพเนนต์ (Component Isolation Testing)

การทดสอบแบบแยกคอมโพเนนต์ หรือที่เรียกว่าการทดสอบคอมโพเนนต์หรือการทดสอบเชิงภาพ (visual testing) มุ่งเน้นไปที่การทดสอบ Web component ในสภาพแวดล้อมที่สมจริงยิ่งขึ้น โดยทั่วไปจะแยกออกจากส่วนที่เหลือของแอปพลิเคชัน แนวทางนี้ช่วยให้คุณสามารถตรวจสอบพฤติกรรม รูปลักษณ์ และการโต้ตอบกับผู้ใช้ของคอมโพเนนต์ได้โดยไม่ได้รับอิทธิพลจากความซับซ้อนของแอปพลิเคชันโดยรอบ

ข้อดีของการทดสอบแบบแยกคอมโพเนนต์

• สภาพแวดล้อมการทดสอบที่สมจริง: การทดสอบแบบแยกคอมโพเนนต์ให้สภาพแวดล้อมการทดสอบที่สมจริงกว่าเมื่อเทียบกับ Unit testing ทำให้คุณสามารถทดสอบพฤติกรรมของคอมโพเนนต์ในบริบทที่ใกล้เคียงกับการใช้งานจริงในแอปพลิเคชันมากขึ้น
• การทดสอบการถดถอยทางภาพ (Visual Regression Testing): การทดสอบแบบแยกคอมโพเนนต์ช่วยให้สามารถทำการทดสอบการถดถอยทางภาพได้ ซึ่งคุณสามารถเปรียบเทียบภาพหน้าจอของคอมโพเนนต์ในเวอร์ชันต่างๆ เพื่อตรวจจับการเปลี่ยนแปลงทางภาพที่ไม่ตั้งใจ
• การทำงานร่วมกันที่ดีขึ้น: เครื่องมือทดสอบแบบแยกคอมโพเนนต์มักจะมีอินเทอร์เฟซแบบภาพที่ช่วยให้นักพัฒนา นักออกแบบ และผู้มีส่วนได้ส่วนเสียสามารถตรวจสอบและให้ข้อเสนอแนะเกี่ยวกับคอมโพเนนต์ได้อย่างง่ายดาย
• การทดสอบการเข้าถึง (Accessibility Testing): การทดสอบการเข้าถึงบนคอมโพเนนต์ที่แยกออกมาทำได้ง่ายกว่า ทำให้มั่นใจได้ว่าคอมโพเนนต์เป็นไปตามมาตรฐานการเข้าถึง

ความท้าทายของการทดสอบแบบแยกคอมโพเนนต์

• การทำงานที่ช้ากว่า: การทดสอบแบบแยกคอมโพเนนต์อาจทำงานช้ากว่า Unit test เนื่องจากเกี่ยวข้องกับการเรนเดอร์คอมโพเนนต์ในสภาพแวดล้อมของเบราว์เซอร์
• การตั้งค่าที่ซับซ้อนกว่า: การตั้งค่าสภาพแวดล้อมการทดสอบแบบแยกคอมโพเนนต์อาจซับซ้อนกว่าการตั้งค่าสภาพแวดล้อมสำหรับ Unit testing
• มีโอกาสที่จะเกิดความไม่เสถียร (Flakiness): การทดสอบแบบแยกคอมโพเนนต์มีแนวโน้มที่จะไม่เสถียรได้ง่ายกว่าเนื่องจากปัจจัยต่างๆ เช่น ความล่าช้าของเครือข่ายและความไม่สอดคล้องกันของเบราว์เซอร์

เครื่องมือและเฟรมเวิร์กสำหรับการทดสอบแบบแยกคอมโพเนนต์

มีเครื่องมือและเฟรมเวิร์กหลายตัวสำหรับการทดสอบแบบแยกคอมโพเนนต์:

• Storybook: เครื่องมือโอเพนซอร์สยอดนิยมสำหรับการพัฒนาและทดสอบคอมโพเนนต์ UI แบบแยกส่วน Storybook มีสภาพแวดล้อมแบบภาพที่คุณสามารถเรียกดูคอมโพเนนต์ โต้ตอบกับมัน และดูเอกสารประกอบได้
• Cypress: เฟรมเวิร์กการทดสอบแบบ End-to-End ที่สามารถใช้สำหรับการทดสอบคอมโพเนนต์ได้เช่นกัน Cypress มี API ที่ทรงพลังสำหรับการโต้ตอบกับคอมโพเนนต์และยืนยันพฤติกรรมของมัน
• Chromatic: แพลตฟอร์มการทดสอบทางภาพที่ทำงานร่วมกับ Storybook เพื่อให้การทดสอบการถดถอยทางภาพและคุณสมบัติการทำงานร่วมกัน
• Bit: แพลตฟอร์มคอมโพเนนต์สำหรับการสร้าง จัดทำเอกสาร และจัดระเบียบคอมโพเนนต์ที่สามารถนำกลับมาใช้ใหม่ได้

ตัวอย่างการทดสอบแบบแยกคอมโพเนนต์ด้วย Storybook

โดยใช้คอมโพเนนต์ <my-counter> เดียวกันกับตัวอย่าง Unit testing เรามาดูกันว่าจะทดสอบด้วย Storybook ได้อย่างไร

.storybook/main.js

module.exports = {
  stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
  addons: [
    '@storybook/addon-links',
    '@storybook/addon-essentials',
    '@storybook/addon-interactions'
  ],
  framework: '@storybook/web-components',
  core: {
    builder: '@storybook/builder-webpack5'
  },
};

src/my-counter.stories.js

import './my-counter.js';

export default {
  title: 'MyCounter',
  component: 'my-counter',
};

const Template = () => '<my-counter></my-counter>';

export const Default = Template.bind({});

ตัวอย่างนี้แสดงวิธีการสร้าง Storybook story สำหรับคอมโพเนนต์ <my-counter> จากนั้นคุณสามารถใช้อินเทอร์เฟซแบบโต้ตอบของ Storybook เพื่อทดสอบคอมโพเนนต์ด้วยตนเองหรือรวมเข้ากับเครื่องมือทดสอบทางภาพเช่น Chromatic

การเลือกกลยุทธ์การทดสอบที่เหมาะสม

Unit testing และการทดสอบแบบแยกคอมโพเนนต์ไม่ใช่สิ่งที่แยกจากกัน แต่กลับเป็นส่วนเสริมซึ่งกันและกัน และควรใช้ร่วมกันเพื่อให้ครอบคลุมการทดสอบสำหรับ Web component ของคุณอย่างสมบูรณ์

เมื่อใดควรใช้ Unit Testing:

• เพื่อทดสอบเมธอดหรือฟังก์ชันแต่ละตัวภายในคลาสของคอมโพเนนต์ของคุณ
• เพื่อตรวจสอบตรรกะและการคำนวณภายในของคอมโพเนนต์
• เมื่อคุณต้องการผลตอบรับที่รวดเร็วระหว่างการพัฒนา
• เมื่อคุณต้องการให้มีความครอบคลุมของโค้ดในระดับสูง

เมื่อใดควรใช้การทดสอบแบบแยกคอมโพเนนต์:

• เพื่อทดสอบพฤติกรรมและรูปลักษณ์ของคอมโพเนนต์ในสภาพแวดล้อมที่สมจริง
• เพื่อทำการทดสอบการถดถอยทางภาพ
• เพื่อปรับปรุงการทำงานร่วมกันระหว่างนักพัฒนา นักออกแบบ และผู้มีส่วนได้ส่วนเสีย
• เพื่อทำการทดสอบการเข้าถึง

แนวทางปฏิบัติที่ดีที่สุดสำหรับการทดสอบ Web Component

นี่คือแนวทางปฏิบัติที่ดีที่สุดบางส่วนที่ควรปฏิบัติตามเมื่อทดสอบ Web component:

• เขียนเทสต์ตั้งแต่เนิ่นๆ และบ่อยครั้ง: ผสานรวมการทดสอบเข้ากับขั้นตอนการพัฒนาของคุณตั้งแต่เริ่มต้นโปรเจกต์ พิจารณาแนวทาง Test-Driven Development (TDD) หรือ Behavior-Driven Development (BDD)
• ทดสอบทุกแง่มุมของคอมโพเนนต์ของคุณ: ทดสอบฟังก์ชันการทำงาน รูปลักษณ์ การเข้าถึง และการโต้ตอบกับผู้ใช้ของคอมโพเนนต์
• ใช้ชื่อเทสต์ที่ชัดเจนและรัดกุม: ใช้ชื่อเทสต์ที่สื่อความหมายชัดเจนว่าแต่ละเทสต์กำลังตรวจสอบอะไร
• ทำให้เทสต์แต่ละตัวแยกจากกัน: ตรวจสอบให้แน่ใจว่าแต่ละเทสต์เป็นอิสระจากเทสต์อื่นๆ และไม่ขึ้นอยู่กับสถานะภายนอก
• ใช้การจำลอง (Mocking) อย่างรอบคอบ: จำลอง dependencies เฉพาะเมื่อจำเป็นเพื่อแยกหน่วยที่กำลังทดสอบเท่านั้น
• ทำให้การทดสอบของคุณเป็นอัตโนมัติ: ผสานรวมการทดสอบของคุณเข้ากับไปป์ไลน์ Continuous Integration (CI) เพื่อให้แน่ใจว่าการทดสอบจะทำงานโดยอัตโนมัติทุกครั้งที่มีการ commit
• ตรวจสอบผลการทดสอบอย่างสม่ำเสมอ: ตรวจสอบผลการทดสอบเป็นประจำเพื่อระบุและแก้ไขเทสต์ที่ล้มเหลว
• จัดทำเอกสารการทดสอบของคุณ: จัดทำเอกสารการทดสอบเพื่ออธิบายวัตถุประสงค์และวิธีการทำงาน
• พิจารณาการทดสอบข้ามเบราว์เซอร์ (Cross-Browser Testing): ทดสอบคอมโพเนนต์ของคุณในเบราว์เซอร์ต่างๆ (Chrome, Firefox, Safari, Edge) เพื่อให้แน่ใจว่าเข้ากันได้ บริการต่างๆ เช่น BrowserStack และ Sauce Labs สามารถช่วยในเรื่องนี้ได้
• การทดสอบการเข้าถึง (Accessibility Testing): นำการทดสอบการเข้าถึงแบบอัตโนมัติมาใช้เป็นส่วนหนึ่งของกลยุทธ์การทดสอบคอมโพเนนต์ของคุณโดยใช้เครื่องมือเช่น axe-core

ตัวอย่าง: การสร้างและทดสอบ Web Component สำหรับ Internationalization (i18n)

ลองพิจารณา Web component ที่จัดการเกี่ยวกับการทำให้เป็นสากล (Internationalization) สิ่งนี้มีความสำคัญอย่างยิ่งสำหรับแอปพลิเคชันที่มุ่งเป้าไปที่ผู้ใช้ทั่วโลก

i18n-component.js

class I18nComponent extends HTMLElement {
  constructor() {
    super();
    this.shadow = this.attachShadow({ mode: 'open' });
    this.language = 'en'; // Default language
    this.translations = {
      en: {
        greeting: 'Hello, world!',
        buttonText: 'Click me',
      },
      fr: {
        greeting: 'Bonjour le monde !',
        buttonText: 'Cliquez ici',
      },
      es: {
        greeting: '¡Hola Mundo!',
        buttonText: 'Haz clic aquí',
      },
    };
    this.render();
  }

  setLanguage(lang) {
    this.language = lang;
    this.render();
  }

  render() {
    const translation = this.translations[this.language] || this.translations['en']; // Fallback to English
    this.shadow.innerHTML = `
      <p>${translation.greeting}</p>
      <button>${translation.buttonText}</button>
    `;
  }
}

customElements.define('i18n-component', I18nComponent);

i18n-component.test.js (Jest)

import './i18n-component.js';

describe('I18nComponent', () => {
  let element;

  beforeEach(() => {
    element = document.createElement('i18n-component');
    document.body.appendChild(element);
  });

  afterEach(() => {
    document.body.removeChild(element);
  });

  it('should display the English greeting by default', () => {
    expect(element.shadowRoot.querySelector('p').textContent).toBe('Hello, world!');
  });

  it('should display the French greeting when the language is set to fr', () => {
    element.setLanguage('fr');
    expect(element.shadowRoot.querySelector('p').textContent).toBe('Bonjour le monde !');
  });

  it('should display the Spanish greeting when the language is set to es', () => {
    element.setLanguage('es');
    expect(element.shadowRoot.querySelector('p').textContent).toBe('¡Hola Mundo!');
  });

  it('should fallback to English if the language is not supported', () => {
    element.setLanguage('de'); // German is not supported
    expect(element.shadowRoot.querySelector('p').textContent).toBe('Hello, world!');
  });
});

ตัวอย่างนี้แสดงวิธีทดสอบ Unit test ของคอมโพเนนต์ Internationalization เพื่อให้แน่ใจว่าแสดงข้อความที่ถูกต้องตามภาษาที่เลือก และกลับไปใช้ภาษาเริ่มต้นหากจำเป็น คอมโพเนนต์นี้แสดงให้เห็นถึงความสำคัญของการคำนึงถึงผู้ใช้ทั่วโลกในการพัฒนาเว็บ

การทดสอบการเข้าถึง (Accessibility Testing) สำหรับ Web Component

การทำให้แน่ใจว่า Web component สามารถเข้าถึงได้โดยผู้ใช้ที่มีความพิการเป็นสิ่งสำคัญอย่างยิ่ง การทดสอบการเข้าถึงควรถูกรวมเข้ากับขั้นตอนการทดสอบของคุณ

เครื่องมือสำหรับการทดสอบการเข้าถึง:

• axe-core: เอนจิ้นการทดสอบการเข้าถึงแบบโอเพนซอร์ส
• Lighthouse: ส่วนขยายของ Google Chrome และโมดูล Node.js สำหรับการตรวจสอบหน้าเว็บ รวมถึงการเข้าถึง

ตัวอย่าง: การทดสอบการเข้าถึงด้วย axe-core และ Jest

import { axe, toHaveNoViolations } from 'jest-axe';
import './my-component.js';

expect.extend(toHaveNoViolations);

describe('MyComponent Accessibility', () => {
  let element;

  beforeEach(async () => {
    element = document.createElement('my-component');
    document.body.appendChild(element);
    await element.updateComplete; // Wait for the component to render
  });

  afterEach(() => {
    document.body.removeChild(element);
  });

  it('should pass accessibility checks', async () => {
    const results = await axe(element.shadowRoot);
    expect(results).toHaveNoViolations();
  });
});

ตัวอย่างนี้แสดงวิธีใช้ axe-core กับ Jest เพื่อทำการทดสอบการเข้าถึงอัตโนมัติบน Web component โดย `toHaveNoViolations` เป็น matcher ที่กำหนดเองของ Jest ซึ่งยืนยันว่าคอมโพเนนต์ไม่มีการละเมิดกฎการเข้าถึง สิ่งนี้ช่วยปรับปรุงความครอบคลุมสำหรับผู้ใช้ทุกคนในเว็บแอปพลิเคชันของคุณได้อย่างมาก

สรุป

การทดสอบ Web component เป็นสิ่งสำคัญอย่างยิ่งสำหรับการสร้างองค์ประกอบ UI ที่แข็งแกร่ง บำรุงรักษาง่าย และสามารถนำกลับมาใช้ใหม่ได้ ทั้ง Unit testing และการทดสอบแบบแยกคอมโพเนนต์มีบทบาทสำคัญในการรับประกันคุณภาพของคอมโพเนนต์ของคุณ ด้วยการผสมผสานกลยุทธ์เหล่านี้และปฏิบัติตามแนวทางปฏิบัติที่ดีที่สุด คุณสามารถสร้าง Web component ที่เชื่อถือได้ เข้าถึงได้ และมอบประสบการณ์ผู้ใช้ที่ยอดเยี่ยมสำหรับผู้ใช้ทั่วโลก อย่าลืมพิจารณาด้าน Internationalization และ Accessibility ในกระบวนการทดสอบของคุณเพื่อให้แน่ใจว่าคอมโพเนนต์ของคุณครอบคลุมและเข้าถึงผู้ชมในวงกว้างขึ้น